/* ==========================================================
   MASQUER LES TITRES DE PAGE ET BREADCRUMBS
   ========================================================== */
header.page-header,
.breadcrumb {
  display: none !important;
}

/* 1. La Palette Hell and Back */
:root {
  --hxb-orange: #FF5C38;
  /* Le orange pompier */
  --hxb-dark: #121212;
  /* Le noir profond */
  --hxb-text: #E0E0E0;
  /* Gris clair pour le texte */
  --hxb-beige: #CCB596;
  /* Beige Hell and Back */
}

/* 2. Le fond du bloc de texte */
#custom-text,
.custom-text-block {
  background-color: var(--hxb-dark) !important;
  color: var(--hxb-text) !important;
  padding: 60px 40px !important;
  margin-top: 50px !important;
  border-radius: 10px;
  border: 1px solid var(--hxb-orange);
  box-shadow: 0 4px 15px rgba(255, 92, 56, 0.15);
}

/* 2.bis Images de fond pour les blocs de texte sur la page d'accueil */
.custom-bg-1 {
  background-image: linear-gradient(180deg, rgba(18, 18, 18, 0.75) 0%, rgba(18, 18, 18, 0.75) 100%), url('https://hellandback.fr/img/cms/Gemini_Generated_Image_a68wyga68wyga68w.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.custom-bg-2 {
  background-image: linear-gradient(180deg, rgba(18, 18, 18, 0.75) 0%, rgba(18, 18, 18, 0.75) 100%), url('https://hellandback.fr/img/cms/691ae9318d393f746a7ce9ab_mission-hero.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.custom-bg-3 {
  background-image: linear-gradient(180deg, rgba(18, 18, 18, 0.75) 0%, rgba(18, 18, 18, 0.75) 100%), url('https://hellandback.fr/img/cms/691ae9318d393f746a7ce9af_equipe-full.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 3. Les Titres H2 */
#custom-text h2,
.custom-text-block h2 {
  color: var(--hxb-orange) !important;
  text-align: center;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 2.2rem;
  margin-bottom: 25px;
  margin-top: 40px;
}

/* 4. Le texte des paragraphes */
#custom-text p,
.custom-text-block p {
  color: #FFFFFF !important;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.8;
  max-width: 900px;
  margin: 0 auto;
}

/* 5. Boutons (liens) du bloc de texte - Remplacé par les classes globales .btn-primary */

/* ==========================================================
   CSS DÉDIÉ A LA PAGE RITUEL (Scpoded)
   ========================================================== */
/* Force le style sur la page CMS 6 */
body#cms.cms-6 #main,
body#cms.cms-6 #content,
body#cms.cms-6 .page-content {
  background-color: #121212 !important;
  color: #F0F0F0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Wrapper principal pour le scoping */
.page-rituel-wrapper {
  background-color: #121212;
}

/* === 1. HERO SECTION === */
.page-rituel-hero {
  background-image: linear-gradient(180deg, rgba(18, 18, 18, 0.3) 0%, rgba(18, 18, 18, 0.9) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 100px 5% 60px 5%;
  text-align: center;
}

.page-rituel-hero h1 {
  color: #FF5C38;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 3rem;
  margin-bottom: 20px;
}

.page-rituel-hero p {
  color: white;
  font-size: 1.3rem;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

/* === 2. STRUCTURE GENERALE DES SECTIONS === */
.page-rituel-section,
.page-rituel-section-dark {
  padding: 60px 5%;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.page-rituel-section-dark {
  background-color: #0D0D0D;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.page-rituel-section h2,
.page-rituel-section-dark h2 {
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 2.2rem;
  margin-bottom: 30px;
}

.page-rituel-section p,
.page-rituel-section-dark p {
  color: #A0A0A0;
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* === 3. ÉLÉMENTS SPÉCIFIQUES (Bubbles, Grids) === */
.page-rituel-audience {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 40px;
}

.page-rituel-audience span {
  border: 1px solid #FF5C38;
  color: #FF5C38;
  padding: 10px 20px;
  border-radius: 50px;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 600;
}

.page-rituel-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 50px;
  text-align: left;
}

.page-rituel-pillar h3 {
  color: #FF5C38;
  font-size: 1.4rem;
  margin-bottom: 15px;
}

/* === 4. BOUTONS ET CTA FINAL === */
.page-rituel-btn {
  display: inline-block;
  background-color: #FF5C38;
  color: black !important;
  padding: 15px 40px;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1rem;
  margin-top: 30px;
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.page-rituel-btn:hover {
  background-color: white;
  transform: translateY(-3px);
}

.page-rituel-cta {
  background-color: #0D0D0D;
  padding: 80px 5%;
  text-align: center;
  border-top: 2px solid #FF5C38;
}

.page-rituel-cta h2 {
  color: white;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

/* ==========================================================
   HEADER BEIGE ET EN FLUX NORMAL (TOUTES LES PAGES)
   ========================================================== */

header#header {
  position: relative !important;
  background-color: var(--hxb-beige, #CCB596) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
}

#header .header-nav {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

#header .header-top {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* ── Textes et icônes du header en foncé pour la lisibilité ── */
#header .header-nav a,
#header .header-nav i,
#header .header-nav span,
#header .header-top a,
#header .header-top i,
.blockcart .header {
  color: var(--hxb-dark, #121212) !important;
}

/* ── Menu principal ── */
#header .top-menu a {
  color: var(--hxb-dark, #121212) !important;
  text-transform: uppercase;
  font-weight: bold;
  background: transparent !important;
}

#header .top-menu a:hover {
  color: var(--hxb-orange, #FF5C38) !important;
}

/* ── Panier ── */
#header .blockcart,
#header .blockcart a,
#header .blockcart .header,
#header .cart-preview,
#header ._desktop_cart a,
#header [id*="cart"] a,
#header [id*="cart"] .header {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--hxb-dark, #121212) !important;
}

/* ── Barre de recherche (fond blanc pour ressortir sur le beige) ── */
#search_widget form input[type="text"] {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: var(--hxb-dark, #121212) !important;
}

#search_widget form input[type="text"]::placeholder {
  color: rgba(0, 0, 0, 0.45) !important;
}

/* 7. Héro Slider (ps_imageslider) — Pleine Largeur Centrée */

/* Empêche le scroll horizontal */
body#index {
  overflow-x: hidden;
}

/* ── Libère TOUTE la chaîne de conteneurs Bootstrap sur la homepage ──
   Structure réelle : section#wrapper > div.container > div.row
                      > div#content-wrapper > section#content.page-home
                      > .homeslider-container                            */
body#index section#wrapper,
body#index section#wrapper>.container,
body#index section#wrapper>.container>.row,
body#index #content-wrapper,
body#index section#content,
body#index section#content.page-home {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════
   HERO SLIDER — HAUTEUR FORCÉE (anti inline-style JS)
   ═══════════════════════════════════════════════════════════ */

/* 1. Conteneur principal : min-height résiste aux conflits JS */
.homeslider-container {
  position: relative !important;
  float: none !important;
  width: 100% !important;
  min-height: 96vh !important;
  height: 96vh !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 2. ul.rslides — c'est ici que responsiveSlides injecte height en inline.
      !important écrase le style inline pour forcer notre hauteur.         */
.rslides,
.homeslider-container .rslides {
  min-height: 96vh !important;
  height: 96vh !important;
  max-height: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 3. ul.homeslider (alias utilisé après init JS) */
.homeslider,
.homeslider-container .homeslider {
  min-height: 96vh !important;
  height: 96vh !important;
  max-height: none !important;
  width: 100% !important;
}

/* 4. Chaque slide li */
.rslides li,
.homeslider li,
.homeslider-container li {
  min-height: 96vh !important;
  height: 96vh !important;
  max-height: none !important;
  width: 100% !important;
}

/* 5. Images : height:100% pour remplir le li parent + object-fit cover
      JAMAIS height:auto ici — c'est lui qui causait le vide gris         */
.homeslider-container img,
.rslides img,
.homeslider img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 96vh !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: 0 !important;
}


/* ── Caption : positionnement style Webflow ── */
/* Position dans le tiers central-bas, aligné à gauche */
.homeslider-container .slide .caption,
.homeslider-container .caption {
  position: absolute !important;
  top: 38% !important;
  bottom: auto !important;
  left: 4% !important;
  right: auto !important;
  width: 55% !important;
  text-align: left !important;
  transform: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Typographie h2 du hero — impact maximal */
.homeslider-container .caption h2 {
  font-size: clamp(1.8rem, 4vw, 3.4rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  text-shadow: 2px 3px 14px rgba(0, 0, 0, 0.6) !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}

/* Description sous le titre */
.homeslider-container .caption div,
.homeslider-container .caption p {
  font-size: clamp(0.95rem, 1.8vw, 1.3rem) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.5) !important;
  margin: 0 !important;
}

/* 8. Masquer les flèches du slider */
.homeslider-container .direction-nav,
.homeslider-container .direction-nav a,
.carousel .carousel-control,
.carousel-control {
  display: none !important;
}

/* ==========================================================
   CSS DÉDIÉ A LA PAGE CMS 7 (RITUEL PROTECTEUR)
   ========================================================== */

/* Force absolue du Full-Width pour Rituel Protecteur (ID 7) */
body#cms.cms-7 #wrapper .container,
body#cms.cms-7 #content,
body#cms.cms-7 #main,
body#cms.cms-7 .page-content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Typographie & Couleurs globales de la page */
.page-rituel-protecteur {
  background-color: var(--hxb-dark, #121212);
  color: var(--hxb-text, #F0F0F0);
  font-family: inherit;
  width: 100%;
}

.page-rituel-protecteur .text-orange {
  color: var(--hxb-orange, #FF5C38);
}

/* ==========================================================
   L'ÉVASION : FORCER LE FULL-WIDTH (BREAKOUT)
   ========================================================== */
body#cms.cms-7 .page-rituel-protecteur {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  background-color: #121212 !important;
  padding-bottom: 50px;
}

/* === HERO SECTION === */
.page-rituel-protecteur .hxb-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 5%;
  /* Image de fond avec overlay assombri pour la lisibilité */
  background-image: linear-gradient(180deg, rgba(18, 18, 18, 0.2) 0%, rgba(18, 18, 18, 0.8) 100%),
    url('https://hellandback.fr/img/cms/691ae9318d393f746a7ce931_product-full-screen.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

.page-rituel-protecteur .hxb-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  color: #FFFFFF;
}

.page-rituel-protecteur .hxb-hero p {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 500;
  max-width: 800px;
  margin: 0 auto;
  color: #E0E0E0;
}

/* === STRUCTURE DES SECTIONS === */
.page-rituel-protecteur .hxb-section {
  padding: 80px 5%;
}

.page-rituel-protecteur .hxb-dark-section {
  background-color: #080808;
  /* Légèrement plus foncé pour contraster */
}

.page-rituel-protecteur .hxb-container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-rituel-protecteur .hxb-section-header,
.page-rituel-protecteur .hxb-split-header {
  text-align: center;
  margin-bottom: 60px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.page-rituel-protecteur .hxb-section-header h2,
.page-rituel-protecteur .hxb-split-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  text-transform: uppercase;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 20px;
}

.page-rituel-protecteur .subtitle-bold {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: #A0A0A0;
  text-transform: uppercase;
}

/* === GRID DES 3 ÉTAPES === */
.page-rituel-protecteur .hxb-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.page-rituel-protecteur .hxb-step-item {
  background-color: #121212;
  border: 1px solid rgba(255, 92, 56, 0.2);
  border-radius: 8px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.page-rituel-protecteur .hxb-step-item:hover {
  transform: translateY(-5px);
  border-color: var(--hxb-orange, #FF5C38);
}

.page-rituel-protecteur .hxb-step-number {
  font-size: 5rem;
  font-weight: 900;
  color: rgba(255, 92, 56, 0.05);
  /* Filigrane très discret */
  position: absolute;
  top: -15px;
  right: 15px;
  line-height: 1;
  user-select: none;
}

.page-rituel-protecteur .hxb-step-text h3 {
  font-size: 1.5rem;
  color: var(--hxb-orange, #FF5C38);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 15px;
  position: relative;
  z-index: 2;
}

.page-rituel-protecteur .hxb-step-text p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #C0C0C0;
  position: relative;
  z-index: 2;
  margin: 0;
}

/* === CALL TO ACTION === */
.hxb-cta,
.page-rituel-protecteur .hxb-cta {
  background-color: var(--hxb-orange, #FF5C38);
  padding: 80px 5%;
  text-align: center;
}

.hxb-cta h2,
.page-rituel-protecteur .hxb-cta h2 {
  color: #121212;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hxb-cta p.text-white,
.page-rituel-protecteur .hxb-cta p.text-white {
  color: #FFFFFF;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.page-rituel-protecteur .hxb-btn-primary {
  display: inline-block;
  background-color: #121212;
  color: #FFFFFF !important;
  padding: 16px 45px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  transition: all 0.3s ease;
  font-size: 1.1rem;
}

.page-rituel-protecteur .hxb-btn-primary:hover {
  background-color: #FFFFFF;
  color: #121212 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .page-rituel-protecteur .hxb-step-item {
    padding: 30px 20px;
  }
}

/* ==========================================================
   DÉCORATION : BANDES OBLIQUES (SECTION 3 ÉTAPES)
   ========================================================== */

/* 1. Le parent (la section sombre) doit masquer ce qui dépasse */
.page-rituel-protecteur .hxb-dark-section {
  position: relative;
  overflow: hidden;
}

/* 2. Injection de l'image de fond via le pseudo-élément ::after */
.page-rituel-protecteur .hxb-dark-section::after {
  content: "";
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 600px;
  height: 600px;
  background-image: url('https://hellandback.fr/img/cms/bandes-orange%202.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
}

/* 3. On sécurise le conteneur global et les cartes pour qu'ils passent au premier plan */
.page-rituel-protecteur .hxb-dark-section .hxb-container,
.page-rituel-protecteur .hxb-section-header {
  position: relative;
  z-index: 1;
}

/* 4. Les cartes restent interactives et au-dessus des bandes */
.page-rituel-protecteur .hxb-step-item {
  position: relative;
  z-index: 2;
}

/* ==========================================================
   GLOBAL FULL WIDTH (TOUT LE SITE)
   ========================================================== */
#header .container,
#wrapper .container,
#footer .container,
.container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

#wrapper,
#content-wrapper,
#main,
.page-content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* ==========================================================
   TROIS SOINS LAYOUT REFINEMENT
   ========================================================== */
.hxb-trois-soins-section {
  background-color: #121212 !important;
  padding: 60px 0 !important;
}

.hxb-trois-soins-section .hxb-container-reduced {
  max-width: 1200px !important;
  /* Matches 3 etapes simples container exactly */
  margin: 0 auto !important;
  padding: 0 15px;
}

.hxb-trois-soins-section .hxb-split-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4% !important;
}

.hxb-trois-soins-section .hxb-split-left {
  flex: 1 1 50% !important;
}

.hxb-trois-soins-section .hxb-split-right {
  flex: 1 1 45% !important;
  display: flex;
  justify-content: flex-end;
}

.hxb-trois-soins-section h2 {
  display: block !important;
  text-align: left !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
  font-size: clamp(2rem, 3vw, 2.8rem) !important;
  line-height: 1.2 !important;
  margin-bottom: 20px !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
}

.hxb-trois-soins-section p.subtitle-bold {
  font-size: 1.1rem !important;
  /* Scale matched to paragraph text above */
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
}

.hxb-trois-soins-section .trousse-img {
  max-height: 380px !important;
  /* Constrain vertical height so it matches the height of the '3 étapes simples' boxes */
  max-width: 100% !important;
  width: auto !important;
  object-fit: contain !important;
}

@media (max-width: 991px) {
  .hxb-trois-soins-section .hxb-split-container {
    flex-wrap: wrap !important;
    text-align: center !important;
  }

  .hxb-trois-soins-section .hxb-split-left,
  .hxb-trois-soins-section .hxb-split-right {
    flex: 1 1 100% !important;
    justify-content: center !important;
  }

  .hxb-trois-soins-section .trousse-img {
    max-height: 300px !important;
    margin-top: 30px !important;
  }
}

/* ==========================================================
   CSS DÉDIÉ A LA PAGE CMS 6 (A PROPOS)
   ========================================================== */

/* Force absolue du Full-Width pour CMS 6 */
body#cms.cms-6 #wrapper .container,
body#cms.cms-6 #content,
body#cms.cms-6 #main,
body#cms.cms-6 .page-content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body#cms.cms-6 .page-a-propos {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  background-color: var(--hxb-dark, #121212) !important;
  font-family: inherit;
  color: var(--hxb-text, #F0F0F0);
  padding-bottom: 0;
}

/* Helpers A Propos */
.page-a-propos .hxb-label {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.page-a-propos .hxb-label-icon {
  color: var(--hxb-orange, #FF5C38);
  margin-right: 8px;
  letter-spacing: -1px;
}
.page-a-propos .hxb-label-white {
  color: white;
}
.page-a-propos img {
  max-width: 100%;
  height: auto;
}

/* Boutons */
.page-a-propos .hxb-apropos-btn {
  display: inline-block;
  padding: 15px 35px;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  clip-path: polygon(92% 0, 100% 25%, 100% 100%, 0 100%, 0 0);
  font-size: 1rem;
}
.page-a-propos .hxb-apropos-btn.btn-orange {
  background-color: var(--hxb-orange, #FF5C38);
  color: white !important;
}
.page-a-propos .hxb-apropos-btn.btn-orange:hover {
  background-color: #e04a29;
}
.page-a-propos .hxb-apropos-btn.btn-black {
  background-color: #121212;
  color: white !important;
}
.page-a-propos .hxb-apropos-btn.btn-black:hover {
  background-color: var(--hxb-orange, #FF5C38);
}

.page-a-propos .hxb-apropos-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 5%;
}

.page-a-propos .hxb-split-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 5%;
}

/* 1. HERO SECTION */
.page-a-propos .hxb-apropos-hero {
  background-image: linear-gradient(180deg, rgba(18, 18, 18, 0.4) 0%, rgba(18, 18, 18, 0.8) 100%),
    url('https://hellandback.fr/img/cms/691ae9318d393f746a7ce94b_about-bg-ima.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 80vh;
  display: flex;
  align-items: center;
  color: white;
  padding: 0 5%;
}
.page-a-propos .hxb-apropos-hero-content {
  max-width: 800px;
}
.page-a-propos .hxb-apropos-hero-content .hxb-label {
  color: white;
}
.page-a-propos .hxb-apropos-hero h1 {
  font-size: clamp(3rem, 6vw, 4.5rem);
  text-transform: uppercase;
  font-weight: 900;
  line-height: 1.1;
  color: white;
  margin-bottom: 30px;
}

/* 2. NOTRE HISTOIRE */
.page-a-propos .hxb-apropos-histoire {
  background-color: #080808;
}
.page-a-propos .hxb-histoire-left {
  flex: 1 1 35%;
}
.page-a-propos .hxb-histoire-right {
  flex: 1 1 55%;
}
.page-a-propos .hxb-histoire-left h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  color: #FFFFFF;
}
.page-a-propos .hxb-histoire-right p {
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #A0A0A0;
}
.page-a-propos .hxb-histoire-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 30px 0;
}
.page-a-propos .hxb-histoire-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
.page-a-propos .hxb-histoire-item img {
  width: 24px;
  min-width: 24px;
  margin-top: 5px;
}
.page-a-propos .hxb-histoire-item span {
  font-size: 1.05rem;
  color: #F0F0F0;
  line-height: 1.4;
}
.page-a-propos .hxb-histoire-mission-desc {
  font-size: 1.15rem;
  font-weight: 500;
  margin-top: 30px;
  color: #C0C0C0;
}
.page-a-propos .hxb-link-white {
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 3. BANNER MISSION */
.page-a-propos .hxb-apropos-banner-mission .hxb-banner-bg {
  min-height: 60vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 4. MISSION & SOLUTIONS */
.page-a-propos .hxb-apropos-solutions {
  background-color: #121212;
}
.page-a-propos .hxb-solutions-header {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 60px;
}
.page-a-propos .hxb-solutions-header h2 {
  flex: 1 1 40%;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  color: #FFFFFF;
}
.page-a-propos .hxb-solutions-intro {
  flex: 1 1 50%;
}
.page-a-propos .hxb-solutions-intro p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 15px;
  color: #A0A0A0;
}
.page-a-propos .hxb-solutions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 60px;
}
.page-a-propos .hxb-solution-icon {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 15px;
}
.page-a-propos .hxb-solution-icon img {
  width: 40px;
  min-width: 40px;
}
.page-a-propos .hxb-solution-icon h3 {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0;
  color: var(--hxb-orange, #FF5C38);
}
.page-a-propos .hxb-solution p,
.page-a-propos .hxb-solution li {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #C0C0C0;
}
.page-a-propos .hxb-solution ul {
  padding-left: 20px;
}
.page-a-propos .hxb-solution li {
  margin-bottom: 10px;
}
.page-a-propos .hxb-solutions-footer {
  margin-top: 60px;
  text-align: center;
}
.page-a-propos .hxb-solutions-footer p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #FFFFFF;
}

/* 5. PARCOURS */
.page-a-propos .hxb-apropos-parcours {
  background-color: #080808;
}
.page-a-propos .hxb-parcours-left {
  flex: 1 1 45%;
}
.page-a-propos .hxb-parcours-right {
  flex: 1 1 45%;
}
.page-a-propos .hxb-parcours-image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background-image: url('https://hellandback.fr/img/cms/691ae9318d393f746a7ce94b_about-bg-ima.webp');
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0.8;
  filter: grayscale(80%);
}
.page-a-propos .hxb-parcours-right h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 900;
  line-height: 1.1;
  color: #FFFFFF;
  margin-bottom: 20px;
}
.page-a-propos .hxb-parcours-right p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 15px;
  color: #A0A0A0;
}
.page-a-propos .hxb-parcours-list {
  margin-top: 20px;
  padding: 0;
  list-style: none !important;
}
.page-a-propos .hxb-parcours-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 15px;
  font-size: 1.05rem;
  color: #C0C0C0;
  padding-left: 0 !important;
}
.page-a-propos .hxb-parcours-list li::before {
  content: '→';
  color: var(--hxb-orange, #FF5C38);
  position: static !important;
  font-weight: bold;
}

/* 6. EQUIPE */
.page-a-propos .hxb-apropos-equipe {
  background-color: #121212;
  color: white;
  text-align: center;
}
.page-a-propos .hxb-equipe-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px auto;
}
.page-a-propos .hxb-equipe-header .hxb-label {
  justify-content: center;
  color: white;
}
.page-a-propos .hxb-equipe-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  color: white;
  margin-bottom: 20px;
}
.page-a-propos .hxb-equipe-header p {
  font-size: 1.15rem;
  line-height: 1.6;
  color: #A0A0A0;
}
.page-a-propos .hxb-equipe-image img {
  max-width: 100%;
  max-height: 500px;
  width: auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* 7. REJOIGNEZ LA COMMUNAUTE */
.page-a-propos .hxb-apropos-communaute {
  position: relative;
  background-color: #080808;
  color: white;
  overflow: hidden;
  border-top: 1px solid rgba(255, 92, 56, 0.2);
}
.page-a-propos .hxb-communaute-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.15;
}
.page-a-propos .hxb-communaute-content {
  position: relative;
  z-index: 10;
  max-width: 800px;
  margin: 0 auto;
  padding: 100px 5%;
  text-align: center;
}
.page-a-propos .hxb-communaute-content .hxb-label {
  justify-content: center;
}
.page-a-propos .hxb-communaute-content h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  color: white;
  margin-bottom: 30px;
}
.page-a-propos .hxb-communaute-content p {
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #A0A0A0;
}
.page-a-propos .hxb-link-white {
  color: white;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 8. CTA FINAL */
.page-a-propos .hxb-apropos-cta {
  background-color: var(--hxb-orange, #FF5C38);
}
.page-a-propos .hxb-cta-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.page-a-propos .hxb-cta-content .hxb-label {
  justify-content: center;
  color: #121212;
}
.page-a-propos .hxb-cta-content h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  color: #121212;
  margin-bottom: 30px;
}

/* ==========================================================
   MICROMETRIC FIXES (CMS RITUEL PRO)
   ========================================================== */

/* 1. Suppression des trous noirs (Hauteurs fixes) */
.page-a-propos .hxb-apropos-hero,
.page-a-propos .hxb-apropos-histoire,
.page-a-propos .hxb-apropos-banner-mission,
.page-a-propos .hxb-apropos-solutions,
.page-a-propos .hxb-apropos-parcours,
.page-a-propos .hxb-apropos-equipe,
.page-a-propos .hxb-apropos-communaute,
.page-a-propos .hxb-apropos-cta {
  min-height: 0 !important;
  height: auto !important;
  padding: 60px 0 !important;
}

/* Cas particulier : Hero Banner (Conserver sa présence visuelle) */
.page-a-propos .hxb-apropos-hero {
  padding: 120px 8% !important;
}
.page-a-propos .hxb-apropos-banner-mission .hxb-banner-bg {
  min-height: 400px !important;
}

/* 2. Visibilité des labels */
.page-a-propos .hxb-label {
  color: #ffffff !important;
}
.page-a-propos .hxb-cta-content .hxb-label {
  color: #121212 !important; /* Garder noir sur le bloc orange final */
}

/* 3. Patch Polissage Visuel (Bandes Beiges & Espacement Mots) */
.page-a-propos .hxb-apropos-banner-mission {
  margin: 0 !important;
  padding: 0 !important;
  background-color: #080808 !important; /* Couleur du bloc Histoire au-dessus */
}

/* Alignement GAUCHE pour les sections alternées */
.page-a-propos .hxb-apropos-hero h1,
.page-a-propos .hxb-apropos-histoire h2,
.page-a-propos .hxb-apropos-solutions h2,
.page-a-propos .hxb-apropos-parcours h2 {
  text-align: left !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

/* Alignement CENTRE pour les sections de conclusion */
.page-a-propos .hxb-apropos-equipe,
.page-a-propos .hxb-apropos-communaute,
.page-a-propos .hxb-solutions-footer {
  text-align: center !important;
}

.page-a-propos .hxb-apropos-equipe h2,
.page-a-propos .hxb-apropos-communaute h2,
.page-a-propos .hxb-apropos-cta h2,
.page-a-propos .hxb-solutions-footer p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-a-propos .hxb-equipe-header p,
.page-a-propos .hxb-communaute-content p {
  max-width: 800px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

@media (max-width: 768px) {
  .page-a-propos .hxb-histoire-grid,
  .page-a-propos .hxb-solutions-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   MASQUER ÉLÉMENTS PAGE CATÉGORIE
   ========================================================== */
body.page-category #left-column,
body.page-category .block-category,
body.page-category .page-header {
  display: none !important;
}

body.page-category #content-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* ==========================================================
   REFONTE PAGE CATEGORIE (STYLE WEBFLOW INDUSTRIEL)
   ========================================================== */

/* 1. Reset et fond de page */
body.page-category, 
body.page-index {
  background-color: #CCB596 !important;
}

/* Reset inner wrappers */
body.page-category #wrapper,
body.page-index #wrapper {
  background-color: #CCB596 !important;
}

/* 2. Container des produits */
body.page-category .products,
body.page-index .products {
  counter-reset: etape-counter;
}
/* Laissons PrestaShop gérer ses colonnes Bootstrap natives (col-xl-4, row, etc.) au lieu de forcer CSS Grid à la racine. */

/* 3. Carte Produit Individuelle (Synchronisée Accueil & Catégorie) */
body.page-category .product-miniature,
body.page-index .product-miniature {
  background-color: transparent !important;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s ease;
  height: 100%;
  padding: 0 10px !important;
  margin-bottom: 30px !important;
}

/* Le vrai container visuel de la carte */
body.page-category .product-miniature .thumbnail-container,
body.page-index .product-miniature .thumbnail-container {
  background-color: #CCB596 !important; /* FORCE BEIGE CARD EVEN ON DARK BG */
  border: 1px solid #202022 !important;
  border-radius: 0;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Contient les hachures */
  height: 100%;
  width: 92%; /* Réduction légère de la taille (8% en moins) */
  margin: 0 auto !important; /* Centrage après réduction */
}

body.page-category .product-miniature:hover .thumbnail-container,
body.page-index .product-miniature:hover .thumbnail-container {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
  background-color: #CCB596 !important; /* EMPÊCHE LE FOND BLANC AU SURVOL */
  background: #CCB596 !important;
}

body.page-category .product-miniature:hover,
body.page-index .product-miniature:hover {
  background-color: transparent !important;
  background: transparent !important;
}

/* 4. En-tête de la carte (Image + Numéro + Hachures) */
body.page-category .thumbnail-top,
body.page-index .thumbnail-top {
  position: relative;
  height: 220px !important; /* Réduit drastiquement pour supprimer le vide sous le flacon */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden;
  width: 100%;
  
  /* FIX HALOS: The background must be SOLID BEIGE for multiply to work */
  background-color: #CCB596 !important;
  border-bottom: none !important;
  
  /* SUPPRESSION DES HACHURES */
  background-image: none !important;
}

/* Forçage de la transparence ABSOLUE sur tous les wrappers PrestaShop */
body.page-category .thumbnail-top *,
body.page-index .thumbnail-top *,
body.page-category .product-miniature .product-thumbnail,
body.page-index .product-miniature .product-thumbnail,
body.page-category .product-miniature .product-thumbnail picture,
body.page-index .product-miniature .product-thumbnail picture {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: block;
  width: 100%;
}

body.page-category .product-miniature .thumbnail-container {
  background-color: transparent !important;
}

/* L'indicateur dynamique "ÉTAPE XX" */
body.page-category .product-miniature,
body.page-index .product-miniature {
  counter-increment: etape-counter;
}

/* Le texte "ÉTAPE" */
body.page-category .thumbnail-top::before,
body.page-index .thumbnail-top::before {
  content: "ÉTAPE";
  position: absolute;
  top: 20px;
  left: 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #202022;
  letter-spacing: 1px;
  z-index: 4;
}

/* Le grand numéro "01", "02", etc. avec contour blanc */
body.page-category .thumbnail-top::after,
body.page-index .thumbnail-top::after {
  content: "0" counter(etape-counter);
  position: absolute;
  top: 30px; /* Remonté légèrement */
  left: 15px; /* Décalé à gauche */
  font-size: 65px;
  font-family: 'Archivo', sans-serif, inherit;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px #ffffff;
  z-index: 4; /* Passé DEVANT l'image */
}

body.page-category .thumbnail-top img,
body.page-index .thumbnail-top img {
  position: relative;
  z-index: 3;
  max-width: 85% !important; /* Slightly smaller to prevent overlap with numbers */
  max-height: 180px !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
  margin: 0 auto !important;
  display: block !important;
  transition: transform 0.3s ease;
  background-color: transparent !important;
}

/* Espacement vertical de la grille (Respiration) */
body.page-category #products .products.row,
body.page-index .products.row {
  row-gap: 40px !important;
}

body.page-category .product-miniature:hover .thumbnail-top img,
body.page-index .product-miniature:hover .thumbnail-top img {
  transform: scale(1.25) translateY(-5px);
}

/* Désactiver l'affichage de l'étape sur le 4ème produit (le Pack) */
body.page-category .products > div:nth-child(4) .thumbnail-top::before,
body.page-category .products > div:nth-child(4) .thumbnail-top::after,
body.page-index .products > div:nth-child(4) .thumbnail-top::before,
body.page-index .products > div:nth-child(4) .thumbnail-top::after {
  display: none !important;
}

/* Suppression des espacements vides avant le titre */
body.page-category .product-flags,
body.page-index .product-flags {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 5;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
  pointer-events: none;
}

body.page-category .product-flags .product-flag,
body.page-index .product-flags .product-flag {
  display: none !important; /* Cache les pastilles "NEUF" etc par défaut */
}

/* Afficher uniquement la pastille PROMO / DISCOUNT */
body.page-category .product-flags .product-flag.on-sale,
body.page-index .product-flags .product-flag.on-sale,
body.page-category .product-flags .product-flag.discount,
body.page-index .product-flags .product-flag.discount {
  display: inline-block !important;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 92, 56, 0.65),
    rgba(255, 92, 56, 0.65) 10px,
    rgba(255, 255, 255, 0.65) 10px,
    rgba(255, 255, 255, 0.65) 20px
  ) !important;
  color: #121212 !important;
  text-shadow: 0 0 3px #ffffff, 0 0 5px #ffffff;
  font-family: 'Archivo', sans-serif, inherit;
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  box-shadow: 0 4px 10px rgba(255, 92, 56, 0.3);
}

/* 5. Section Description du produit (Bas de carte) */
body.page-category .product-description,
body.page-index .product-description {
  background-color: transparent !important;
  padding: 5px 15px 15px 15px !important; /* Réduction drastique du whitespace supérieur */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

body.page-category .product-miniature:hover .product-description,
body.page-index .product-miniature:hover .product-description {
  background-color: transparent !important; /* Empêche le fond blanc au hover */
}

/* Titre du produit */
body.page-category .product-title {
  border-bottom: 2px solid #202022;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

body.page-category .product-title a {
  font-family: 'Archivo', sans-serif, inherit;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #202022 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  letter-spacing: 0.5px;
  background: transparent !important;
}

/* Prix et bouton - SYNC CATEGORY AND INDEX */
body.page-category .product-price-and-shipping,
body.page-index .product-price-and-shipping {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: auto !important;
  padding: 0 5px !important;
  min-height: 40px !important;
  overflow: visible !important;
}

body.page-category .product-price-and-shipping .price,
body.page-index .product-price-and-shipping .price {
  font-family: 'Archivo', sans-serif, inherit;
  font-size: 15px;
  font-weight: 700;
  color: #202022 !important;
}

/* Call to action "ACHETER MAINTENANT >>" */
body.page-category .product-price-and-shipping::after,
body.page-index .product-price-and-shipping::after {
  content: "ACHETER MAINTENANT \00BB";
  font-family: 'Archivo', sans-serif, inherit;
  font-size: 10px;
  font-weight: 700;
  color: #202022;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Cache les pastilles "NEUF" etc pour un rendu plus pur (géré plus haut) */

/* Force les blocks additionnels à disparaitre s'ils déforment (quickview, variants) */
body.page-category .highlighted-informations,
body.page-index .highlighted-informations {
  display: none !important;
  pointer-events: none !important; /* FIX BUG 3: Empêche la couche de bloquer le clic en dessous */
}

/* FIX BUG 3 V2 : Approche radicale - Forcer le conteneur complet (description + prix) au premier plan */
body.page-category .product-description,
body.page-index .product-description {
  position: relative !important;
  z-index: 100 !important; /* Force le z-index très élevé sur tout le bloc ! */
  pointer-events: auto !important;
}

body.page-category .product-miniature,
body.page-index .product-miniature {
  overflow: visible !important; /* Libère les enfants s'ils étaient clippés */
}

body.page-category .product-price-and-shipping,
body.page-index .product-price-and-shipping {
  position: relative !important;
  z-index: 101 !important;
}

/* Title category header on page */
body.page-category #js-product-list-header {
  margin-bottom: 40px;
}

/* Suppression de l'espace noir (artefact) entre produits et newsletter */
body.page-category #wrapper {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#content-wrapper {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* ==========================================================
   REFONTE PAGE D'ACCUEIL (PREMIUM EDITORIAL FLOW)
   ========================================================== */

body.page-index #content {
  background-color: #CCB596 !important;
}

/* Alternance des sections et padding massif pour l'effet éditorial */
body.page-index .featured-products {
  margin-top: 20px !important; /* Espacement délimitation visuelle sous le Hero Banner */
}

body.page-index .featured-products,
body.page-index .new-products {
  background-color: #CCB596 !important;
  color: #202022 !important;
  padding: 0 !important; /* RESET PADDING TO REMOVE EXTERNAL GAPS */
  margin-bottom: 0 !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Content spacing moved inside to keep sections flush */
body.page-index .featured-products .container,
body.page-index .new-products .container {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

/* Titres Premium H2 et Espacement (Branding) */
body.page-index h2.products-section-title,
body.page-index .featured-products h2.products-section-title,
body.page-index .new-products h2.products-section-title {
  font-family: 'Archivo', sans-serif, inherit !important;
  font-size: 52px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 5px !important;
  padding-bottom: 20px !important;
  border-bottom: 2px solid #000 !important;
  width: fit-content !important;
  margin: 0 auto 50px auto !important;
  text-align: center !important;
  color: #121212 !important;
  display: block !important;
}

/* Suppression de la bande orange hachurée */
.hxb-orange-divider {
  display: none !important;
}

/* Bannières et Images de fond - PLEINE LARGEUR SANS MARGE (DEFINITIVE BREAKOUT) */
body.page-index #wrapper { padding-top: 0 !important; }

/* Parent containers must allow breakout */
body.page-index #content-wrapper,
body.page-index #main,
body.page-index #content {
  overflow: visible !important;
}

#carousel, .carousel, .carousel-inner, .carousel-item,
#custom-text, .custom-text, .custom-text-block, .banner { 
  margin: 0 !important; 
  padding: 0 !important; 
  border-radius: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  min-height: auto !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Réduction de la hauteur du Hero pour éviter le full-screen */
#carousel, #carousel .carousel-item, #carousel .carousel-item img {
  max-height: 65vh !important;
  height: 65vh !important;
  width: 100vw !important;
  object-fit: cover !important;
}

/* Centrage vertical et horizontal absolu du texte Hero Banner */
#carousel .carousel-item .caption, 
#carousel .carousel-item .carousel-caption,
#carousel .carousel-item figcaption {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100vw !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  position: absolute !important;
  margin: 0 !important;
  padding: 0 20px !important;
}

#carousel .carousel-item .caption *, 
#carousel .carousel-item .carousel-caption *,
#carousel .carousel-item figcaption * {
  margin-left: auto !important;
  margin-right: auto !important;
  color: #ffffff !important;
}

body.page-index .banner {
  display: block !important;
  line-height: 0;
}

body.page-index .banner img, 
body.page-index .banner a,
body.page-index .carousel-item img,
body.page-index .custom-text-block img {
  width: 100vw !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Global removal of borders/shadows/radius for banners */
.banner, .banner a, .banner img, #carousel, .carousel-item, .custom-text-block {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Calque sombre sur les bannières pour le contraste */
body.page-index .banner a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}

body.page-index .banner h2,
body.page-index .banner p {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
}

/* Espacement interne massif pour les bannières (Breathing) - EVITER LES COUPURES */
body.page-index .banner .container,
body.page-index .banner > a,
body.page-index .custom-text-block,
body.page-index #custom-text {
  padding: 85px 25px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 350px !important;
  height: auto !important;
}

/* Fix Product Grid on Home - 4 COLUMNS & SYNC WITH CATEGORY */
body.page-index .products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  overflow: visible !important;
  margin: 0 auto !important;
}

body.page-index .products > div {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* Suppression des overrides spécifiques à l'accueil pour laisser les styles partagés (l. 1270+) agir */
body.page-index .product-miniature,
body.page-index .product-miniature .thumbnail-container {
  max-height: none !important;
  overflow: visible !important;
}

body.page-index .product-description {
  height: auto !important;
}

body.page-index .highlighted-informations {
  display: none !important; /* Remove Quick View */
}

body.page-index .featured-products .thumbnail-top,
body.page-index .new-products .thumbnail-top {
  background-color: #CCB596 !important;
}

/* Let cards on dark bg have a lighter step number/text if needed, but keeping original for now */
body.page-index .featured-products .thumbnail-top::before {
  color: #ffffff !important; /* Better contrast for labels on dark cards */
}


/* ==========================================================
   MICRO-INTEGRATION "RITUEL PROTECTEUR" (MICRO-MISSION)
   ========================================================== */

/* 1. Visibilité et calques des numéros d'étape (01, 02, 03) */
body.page-index .featured-products .thumbnail-top::after {
  z-index: 1 !important; /* Laisse le numéro en fond */
  top: 15px !important;
  left: 10px !important;
  font-size: 80px !important; /* Augmentation pour lisibilité */
  -webkit-text-stroke: 1.5px #ffffff !important;
  opacity: 0.9 !important;
}

body.page-index .featured-products .thumbnail-top::before {
  z-index: 2 !important; /* Texte ÉTAPE légèrement au-dessus */
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* 2. Intégration des images produits (bouteilles) */
body.page-index .featured-products .thumbnail-top img {
  max-height: 240px !important;
  height: 240px !important;
  width: auto !important;
  margin: 0 auto !important;
  display: block !important;
  object-fit: contain !important;
  position: relative !important;
  z-index: 5 !important; /* Bouteille au premier plan sur le numéro */
  mix-blend-mode: multiply !important; /* Indispensable pour la transparence sur fond beige */
  background-color: transparent !important;
}

/* 3. Design des titres de produits (Premium) */
body.page-index .featured-products .product-title {
  border-bottom: 2px solid #111111 !important;
  margin-bottom: 20px !important;
  padding-bottom: 15px !important;
  height: auto !important;
}

body.page-index .featured-products .product-title a {
  color: #111111 !important; /* Noir profond */
  font-family: 'Archivo', 'Inter', sans-serif !important; /* Force sans-serif moderne */
  font-weight: 900 !important; /* Gras très prononcé */
  text-transform: uppercase !important; /* Majuscules forcées */
  font-size: 1.25rem !important; /* Taille augmentée */
  margin: 15px 0 !important; /* Respiration */
  display: block !important;
  line-height: 1.2 !important;
  letter-spacing: 1px !important;
  text-decoration: none !important;
}

/* NEWSLETTER PLEINE LARGEUR AVEC CONTENU CENTRÉ */
.block_newsletter {
  background-color: var(--hxb-beige, #CCB596) !important;
  color: #000 !important;
  padding: 60px 0 !important;
  border-top: none !important; 

  /* Technique du Breakout pour le 100vw */
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100vw !important;
}

/* Containerisation du contenu de la newsletter */
.block_newsletter .container,
.block_newsletter .row {
  max-width: 1000px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important; /* regroupé au centre (corrigé : space-between = grand vide qui "vole") */
  align-items: center !important;
  gap: 20px 44px !important;
  text-align: center !important;
}

.block_newsletter h3, 
.block_newsletter h2,
.block_newsletter #block-newsletter-label {
  margin: 0 !important;
  color: #000000 !important; /* Better contrast */
  font-weight: 700 !important;
  font-size: 24px !important;
}

.block_newsletter .col-md-5, 
.block_newsletter .col-xs-12 {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
}

/* Newsletter form refinements - FORCE STACKING AND TOTAL BLACK COLOR */
.block_newsletter form .row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Forces centering under the form elements */
  justify-content: center !important;
}

/* Container for input and button - Keep them side by side and centered */
.block_newsletter form .row > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 15px !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}

/* THE LEGAL TEXT : ABSOLUTE FORCE */
.block_newsletter form p, 
#blockEmailSubscription_displayFooterBefore form p,
#blockEmailSubscription_displayFooterBefore p {
  color: #000000 !important; /* ABSOLUTE SOLID BLACK for maximum visibility */
  opacity: 1 !important;
  margin: 15px auto 0 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  text-align: center !important;
  display: block !important;
  max-width: 500px !important;
}

/* Bouton Newsletter Orange Vif */
.block_newsletter input[type="submit"], 
.block_newsletter .btn-primary {
  background-color: #FF5C38 !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 10px 25px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.block_newsletter input[type="submit"]:hover {
  background-color: #000000 !important;
}

/* FOOTER PLEINE LARGEUR */
#footer {
  background-color: #121212 !important; /* Anthracite profond */
  color: #b0b0b0 !important; /* Gris clair pour l'accessibilité */
  padding: 0 0 60px 0 !important;

  /* Technique du Breakout */
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100vw !important;
}

#footer a, #footer .h3, #footer .cms-page-link, #footer p, #footer span {
  color: #b0b0b0 !important; /* Uniformisation de la lisibilité */
}

#footer a:hover {
  color: #FFFFFF !important;
}

#footer h1, #footer h2, #footer h3, #footer .h1, #footer .h2, #footer .h3 {
  color: #FFFFFF !important;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 20px;
}



/* ==========================================================================
   REFONTE FICHE PRODUIT - LA PIVOT BEIGE
   ========================================================================== */

/* 1. Reset Background & Text (Back to Soft Beige) */
body.page-product, #wrapper, #content-wrapper, #main, .page-content {
  background-color: var(--hxb-beige, #CCB596) !important;
  color: #121212 !important;
}

body.page-product h1, body.page-product h2, body.page-product h3, body.page-product h4, body.page-product p, body.page-product span {
  color: #121212; /* Default text to black for contrast on beige */
}

/* 2. Brutalist Product Title & Price */
body.page-product h1.h1 {
  text-transform: uppercase !important;
  font-weight: 900 !important;
  font-size: clamp(3rem, 5vw, 4.5rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 20px !important;
  color: #121212 !important;
  font-family: 'Archivo', sans-serif, inherit !important;
}

body.page-product .current-price span,
body.page-product .current-price {
  font-size: clamp(2rem, 3vw, 2.5rem) !important;
  font-weight: 900 !important;
  color: #FF5C38 !important; /* Price is big and orange */
}

body.page-product .tax-shipping-delivery-label {
  color: #555555 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
}
@media (max-width: 768px) {
  body.page-product h1.h1 { font-size: 2.5rem !important; }
}

body.page-product .current-price span,
body.page-product .current-price {
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  color: #121212 !important; /* prix en charbon (corrigé : doublon le mettait en #ffffff = illisible sur le beige) */
  letter-spacing: -1px !important;
}

body.page-product .tax-shipping-delivery-label {
  color: #9b8a70 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* 3. The Orange Core (Add to Cart & Variants) */
body.page-product .add-to-cart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  line-height: 1 !important;
  background-color: #FF5C38 !important;
  color: #ffffff !important;
  width: 100% !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.06em !important;
  padding: 18px 30px !important;
  border: none !important;
  border-radius: 0 !important;
  /* coins chanfreinés (haut-droit + bas-gauche) façon "tag" — style site .co */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)) !important;
  margin-top: 18px !important;
  transition: background-color 0.25s ease, transform 0.15s ease !important;
}
/* chevron » façon site canadien */
body.page-product .add-to-cart::after {
  content: "\00BB" !important;
  font-size: 1.15em !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
body.page-product .add-to-cart:hover {
  background-color: #121212 !important;
  color: #FF5C38 !important;
  transform: translateY(-1px) !important;
}
body.page-product .add-to-cart .material-icons {
  display: none !important; /* Hide cart icon for brutalist look */
}

/* Product Quantity Input Brutalist */
body.page-product .product-quantity {
  margin-bottom: 20px !important;
}
body.page-product .product-quantity .input-group {
  border: 1px solid rgba(18,18,18,0.35) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}
body.page-product .product-quantity input#quantity_wanted {
  background: transparent !important;
  color: #121212 !important;
  border: none !important;
  height: 40px !important;
  font-weight: bold !important;
}
body.page-product .product-quantity .input-group-btn-vertical button {
  background: transparent !important;
  color: #121212 !important;
  border: none !important;
}

/* Variant selectors */
body.page-product .product-variants select {
  background-color: transparent !important;
  color: #121212 !important;
  border: 1px solid #121212 !important;
  border-radius: 0 !important;
  padding: 10px !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
}
body.page-product .product-variants label {
  text-transform: uppercase !important;
  font-weight: bold !important;
  color: #121212 !important;
}

/* 4. Image Gallery Bug Fix */
body.page-product .product-cover {
  border: none !important;
  background: transparent !important;
  margin-bottom: 20px !important;
}
body.page-product .product-cover img {
  mix-blend-mode: multiply !important; /* Crucial for clipping white background on beige */
}
/* Transparence absolue des miniatures */
body.page-product .product-images > li.thumb-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-right: 10px !important;
    opacity: 1 !important;
    outline: none !important;
}
body.page-product .product-images > li.thumb-container.selected,
body.page-product .product-images > li.thumb-container:hover {
    outline: none !important;
}
body.page-product .product-images > li.thumb-container img {
    background: transparent !important;
    mix-blend-mode: multiply !important;
    object-fit: contain !important;
    outline: none !important;
}

/* Alignement moderne et ultra-spécifique des puces */
body.page-product .product-description ul,
body.page-product #product-description-short ul,
body.page-product [id^="product-description-short-"] ul {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.page-product .product-description ul li,
body.page-product #product-description-short ul li,
body.page-product [id^="product-description-short-"] ul li {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 8px !important;
}
body.page-product .product-description ul li::before,
body.page-product #product-description-short ul li::before,
body.page-product [id^="product-description-short-"] ul li::before {
    content: "\2022" !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    color: #121212 !important;
    font-weight: bold !important;
}
body.page-product .product-description ul li p,
body.page-product #product-description-short ul li p,
body.page-product [id^="product-description-short-"] ul li p {
    margin: 0 !important;
}
body.page-product .product-images > li.thumb-container.selected,
body.page-product .product-images > li.thumb-container:hover {
  /* Restauration du comportement natif (contour cyan) */
}
body.page-product .product-images > li.thumb-container img {
  mix-blend-mode: multiply !important;
}

/* 5./* Masquer strictement le bloc Déjà vus et autres cross-selling indésirables */
body.page-product section.featured-products:not([data-type="categoryproducts"]),
body.page-product .product-accessories {
  display: none !important;
}

/* 6. Accordion Styling (for details/summary tags replacing tabs) */
body.page-product .hxb-accordion {
  margin-top: 40px !important;
  border-top: 2px solid #121212 !important;
}
body.page-product .hxb-accordion details {
  border-bottom: 1px solid #121212 !important;
}
body.page-product .hxb-accordion summary {
  padding: 20px 0 !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: #121212 !important;
  cursor: pointer !important;
  List-style: none !important;
  outline: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
body.page-product .hxb-accordion summary::-webkit-details-marker {
  display: none !important;
}
body.page-product .hxb-accordion summary::after {
  content: '+';
  font-size: 2rem;
  font-weight: 300;
  transition: transform 0.3s ease;
}
body.page-product .hxb-accordion details[open] summary::after {
  transform: rotate(45deg);
}
body.page-product .hxb-accordion .accordion-content {
  padding: 10px 0 30px 0 !important;
}
body.page-product .hxb-accordion .accordion-content p,
body.page-product .hxb-accordion .accordion-content li {
  color: #333333 !important;
  line-height: 1.8 !important;
  font-size: 1.1rem !important;
}

/* Header/Footer exceptions to remain unchanged if needed */
body.page-product header,
body.page-product footer,
body.page-product .header-top {
  background-color: #ffffff !important; /* Or beige, leaving it default if possible */
}
body.page-product header *,
body.page-product footer * {
  color: inherit; /* Reset to header default */
}

/* ==========================================================================
   REFONTE FICHE PRODUIT - CORRECTIONS D ACTUALISATION
   ========================================================================== */

/* Fix Add to Cart Full Width & Hide Parasitic White Circle */
body.page-product .product-add-to-cart {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
body.page-product .product-add-to-cart .add {
  width: 100% !important;
  display: block !important;
  margin-top: 15px !important;
  margin-left: 0 !important;
}
body.page-product .product-add-to-cart .add-to-cart {
  width: 100% !important;
}
body.page-product .product-add-to-cart button:not(.add-to-cart),
body.page-product .product-add-to-cart a:not(.add-to-cart) {
  display: none !important;
}

/* Remove White "Fantomes" Cards */
body.page-product .card,
body.page-product .card-block {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Héro : zone photo — bandes maison TRÈS discrètes en fond (façon site .co),
   larges et tonales (à peine plus foncées que le beige). L'image se FOND
   dessus via mix-blend multiply → pas de cadre blanc, le flacon se pose sur le fond. */
body.page-product .product-cover {
  padding: 30px 20px !important;
  border-radius: 0 !important; /* angles nets (DA Hell and Back) — était 16px */
  background:
    repeating-linear-gradient(50deg, rgba(150,128,96,0.09) 0 46px, rgba(150,128,96,0) 46px 92px),
    #f2e8d6 !important;
  border: none !important;
  overflow: hidden !important;
  margin-bottom: 0 !important; /* le centrage des miniatures gère l'écart sous l'écrin */
  flex: 0 0 auto !important;   /* l'écrin garde sa taille : c'est la bande miniatures qui remplit le reste */
  /* Centre l'image verticalement dans l'écrin (avant : calée en haut, vide en bas) */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
body.page-product .product-cover img {
  mix-blend-mode: multiply !important;
  background-color: transparent !important;
}

/* === MODAL « Donnez votre avis » : isoler du style écrin héro + layout propre (2026-07-04) ===
   La vignette produit du modal partage la classe .product-cover → elle héritait
   du padding/rayures/fondu de l'écrin héro, d'où le débordement mobile. On la remet à plat. */
body.page-product .product-comment-modal .product-cover {
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid #ece3d3 !important;
  border-radius: 10px !important;
  margin: 0 !important;
  overflow: hidden !important;
  width: 90px !important;
  height: 90px !important;
}
body.page-product .product-comment-modal .product-cover img {
  mix-blend-mode: normal !important;
  width: 90px !important;
  height: 90px !important;
  object-fit: cover !important;
}
/* empilement propre du modal, surtout sur mobile (fini le texte sur l'image) */
.product-comment-modal .modal-body .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}
@media (max-width: 767px) {
  .product-comment-modal .modal-body .col-sm-2,
  .product-comment-modal .modal-body .col-sm-4,
  .product-comment-modal .modal-body .col-sm-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .product-comment-modal .modal-body .col-sm-4 { margin-top: 12px !important; }
  .product-comment-modal .modal-body .col-sm-6 { margin-top: 16px !important; }
}

/* Remove Cross-Selling White Cards */
body.page-product .products .product-miniature {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.page-product .products .product-miniature .thumbnail-top {
  background-color: transparent !important; 
}
body.page-product .products .product-miniature .product-description {
  background-color: transparent !important;
}
body.page-product .products .product-miniature .product-title,
body.page-product .products .product-miniature .product-title a,
body.page-product .products .product-miniature .price {
  color: #121212 !important; 
}

/* Footer / Comments blocks */
/* Icônes de partage social : rondes (OK) */
body.page-product .social-sharing li a {
  background-color: transparent !important;
  color: #121212 !important;
  border: 1px solid #121212 !important;
  border-radius: 50% !important;
}
/* Titre "Commentaires" : titre de section propre.
   (corrigé : était groupé avec les icônes rondes -> border-radius 50% = ovale noir géant) */
body.page-product #product-comments-list-header {
  background-color: transparent !important;
  color: #121212 !important;
  border: none !important;
  border-bottom: 2px solid #121212 !important;
  border-radius: 0 !important;
  padding: 0 0 10px 0 !important;
  margin-bottom: 16px !important;
}
body.page-product .product-description {
    background: transparent !important;
}

/* ==========================================================================
   REFONTE FICHE PRODUIT - CORRECTIONS D ACTUALISATION V2
   ========================================================================== */

/* Cross-Selling Cards (Match Homepage Aesthetic) */
body.page-product .products .product-miniature {
  background-color: transparent !important; /* Beige background by default */
  border: none !important;
}
body.page-product .products .product-miniature .thumbnail-top,
body.page-product .products .product-miniature .thumbnail-container,
body.page-product .products .product-miniature .thumbnail,
body.page-product .products .product-miniature .product-description {
  background-color: transparent !important; 
}
body.page-product .products .product-miniature img {
  mix-blend-mode: multiply !important;
}
body.page-product .products .product-miniature .product-title,
body.page-product .products .product-miniature .product-title a,
body.page-product .products .product-miniature .price {
  color: #121212 !important; /* Dark text on beige card */
}
body.page-product .products .product-miniature .wishlist-button-add,
body.page-product .products .product-miniature .btn-wishlist {
  display: none !important;
}

/* Fix Thumbnails wrapper white bleeding */
body.page-product .images-container .product-images {
  background: transparent !important;
}
body.page-product .scroll-box-arrows,
body.page-product .scroll-box-arrows * {
  background-color: transparent !important;
  color: #121212 !important;
}

/* Social sharing icons white circles */
body.page-product .social-sharing li {
  background-color: transparent !important;
}
body.page-product .social-sharing li a {
  background-color: transparent !important;
  color: #121212 !important;
  border: 1px solid #121212 !important;
  border-radius: 50% !important;
}
body.page-product .social-sharing li a i {
  color: #121212 !important;
}

/* Fix product comments white block & any hidden cards */
body.page-product #empty-product-comment,
body.page-product .product-comments-empty {
  background: transparent !important;
  color: #121212 !important;
}


/* ==========================================================
   BANDEAU SÉPARATEUR D'IDENTITÉ (PURE CSS MONOLITH)
   ========================================================== */
body#index .identity-separator {
    background-color: #111111 !important; /* Anthracite pur */
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 60px 0 !important; /* Espacement monolithique */
}

body#index .identity-stripe-top,
body#index .identity-stripe-bottom {
    height: 25px !important;
    width: 100% !important;
    background: repeating-linear-gradient(
        45deg,
        #FF5C38,           /* Orange H&B */
        #FF5C38 20px,
        #111111 20px,
        #111111 40px
    ) !important;
    opacity: 1 !important;
}

body#index .identity-text {
    color: #FFFFFF !important;
    font-size: clamp(3rem, 10vw, 15rem) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -2px !important;
    line-height: 1 !important;
    text-align: center !important;
    font-family: inherit;
    user-select: none;
    padding: 60px 20px !important; /* Padding généreux demandé */
    margin: 0 !important;
}

/* ==========================================================
   URGENCES RESPONSIVE SMARTPHONE (< 767px)
   ========================================================== */
@media (max-width: 767px) {
    /* 2. Newsletter : Empilage vertical et centrage (Global - Brute Force) 
       Cache Buster: 2024-03-24 11:00 */
    html body .block_newsletter,
    html body .block_newsletter .row,
    html body .block_newsletter .col-xs-12,
    html body .block_newsletter form,
    html body .block_newsletter form .row > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body .block_newsletter {
        padding: 60px 20px !important;
        background-color: var(--hxb-beige, #CCB596) !important;
    }

    html body .block_newsletter p#block-newsletter-label {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }

    html body .block_newsletter .input-wrapper {
        width: 100% !important;
        margin-bottom: 20px !important;
        order: 1 !important;
    }

    html body .block_newsletter input[type="email"] {
        width: 100% !important;
        height: 55px !important;
        text-align: center !important;
        border: 1px solid #121212 !important;
    }

    html body .block_newsletter input[type="submit"] {
        width: 100% !important;
        height: 55px !important;
        margin: 0 !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        background-color: #FF5C38 !important;
        color: white !important;
        order: 2 !important;
        float: none !important;
    }

    /* Gestion des boutons Desktop/Mobile de Prestashop */
    html body .block_newsletter .hidden-xs-down {
        display: none !important;
    }
    html body .block_newsletter .hidden-sm-up {
        display: block !important;
    }

    /* 1. Cartes Produits : 1 seule colonne propre */
    .featured-products .products, 
    #content .products {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
        padding: 0 15px !important;
    }

    .product-miniature {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }

    .product-miniature .thumbnail-container {
        padding: 10px !important;
        margin-bottom: 5px !important;
    }

    /* Assure que ÉTAPE X et le titre ne sont pas coupés */
    .product-miniature .product-description {
        padding: 15px !important;
        text-align: center !important;
    }

    .product-miniature h3,
    .product-miniature .product-title {
        font-size: 1.4rem !important;
        white-space: normal !important; /* Évite le cisaillement */
        overflow: visible !important;
    }
}

/* ==========================================================
   UNIFORMISATION DES BOUTONS ORANGE BANNER (NOIR MASSIF)
   ========================================================== */
.hxb-cta .hxb-btn-primary, 
.hxb-apropos-cta .hxb-apropos-btn {
  display: inline-block !important;
  background-color: #111111 !important;
  color: #ffffff !important;
  padding: 15px 40px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: none !important;
  margin-top: 20px !important;
  transition: all 0.3s ease !important;
  clip-path: none !important; /* Overrides the polygon clip-path if present */
}

.hxb-cta .hxb-btn-primary:hover, 
.hxb-apropos-cta .hxb-apropos-btn:hover {
  background-color: #333333 !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================
   MODALE AJOUT AU PANIER - IDENTITÉ HELL AND BACK
   ========================================================== */

/* 1. Conteneur principal de la modale */
#blockcart-modal .modal-content {
  background-color: #CCB596 !important; /* BEIGE DE LA MARQUE */
  color: #111111 !important;
  border-radius: 0 !important;
  border: none !important;
}

/* 2. En-tête sans bordure */
#blockcart-modal .modal-header {
  background-color: #CCB596 !important;
  border-bottom: none !important;
  color: #111111 !important;
}

#blockcart-modal .modal-header .modal-title,
#blockcart-modal .modal-header h4,
#blockcart-modal .modal-header h5 {
  color: #111111 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

/* 3. Icône de succès (tick vert -> orange de la marque) */
#blockcart-modal .modal-title .material-icons,
#blockcart-modal .modal-header .material-icons,
#blockcart-modal i.material-icons {
  color: #FF5500 !important;
}

/* 4. Corps de la modale */
#blockcart-modal .modal-body {
  background-color: #CCB596 !important;
  color: #111111 !important;
}

#blockcart-modal .modal-body p,
#blockcart-modal .modal-body span,
#blockcart-modal .modal-body .product-name,
#blockcart-modal .modal-body .price {
  color: #111111 !important;
}

/* 5. Séparateur entre cart et product info */
#blockcart-modal .divide-right {
  border-right: 1px solid rgba(17, 17, 17, 0.2) !important;
}

#blockcart-modal .cart-content {
  background-color: transparent !important;
}

/* 6. BOUTON PRINCIPAL - Commander / Proceed to checkout */
#blockcart-modal .cart-content-btn .btn-primary,
#blockcart-modal a.btn-primary,
#blockcart-modal .checkout {
  background-color: #FF5500 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 15px 30px !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  margin: 0 !important;
}

#blockcart-modal .cart-content-btn .btn-primary:hover,
#blockcart-modal a.btn-primary:hover {
  background-color: #cc4400 !important;
}

/* 7. BOUTON SECONDAIRE - Continuer mes achats */
#blockcart-modal .cart-content-btn .btn-secondary,
#blockcart-modal button.btn-secondary {
  background-color: transparent !important;
  color: #111111 !important;
  border: 2px solid #111111 !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 13px 30px !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  margin-top: 10px !important;
}

#blockcart-modal .cart-content-btn .btn-secondary:hover,
#blockcart-modal button.btn-secondary:hover {
  background-color: #111111 !important;
  color: #ffffff !important;
}

/* 8. Pied de page de la modale */
#blockcart-modal .modal-footer {
  background-color: #CCB596 !important;
  border-top: none !important;
}

/* 9. Close button */
#blockcart-modal .close {
  color: #111111 !important;
  opacity: 0.7 !important;
}
#blockcart-modal .close:hover {
  opacity: 1 !important;
}

/* 10. Boutons côte à côte (row, stables au survol) */
#blockcart-modal .cart-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

#blockcart-modal .cart-content-btn {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 15px !important;
  width: 100% !important;
}

#blockcart-modal .cart-content-btn .btn-primary,
#blockcart-modal .cart-content-btn .btn-secondary {
  flex: 1 !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  padding: 12px 10px !important;
  float: none !important;
  display: block !important;
  transform: none !important;
}

/* 11. Image produit : Mix Blend Mode (adieu le carré blanc) */
#blockcart-modal .product-image {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#blockcart-modal .product-image img {
  object-fit: contain !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  display: block !important;
  mix-blend-mode: multiply !important;
}

/* 12. Fix Hover du bouton COMMANDER (gel du design) */
#blockcart-modal .cart-content-btn .btn-primary:hover,
#blockcart-modal .cart-content-btn .btn-primary:focus,
#blockcart-modal .cart-content-btn .btn-primary:active {
  background-color: #cc4400 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 15px 30px !important;
}

/* Fix Hover du bouton CONTINUER MES ACHATS */
#blockcart-modal .cart-content-btn .btn-secondary:hover,
#blockcart-modal .cart-content-btn .btn-secondary:focus,
#blockcart-modal .cart-content-btn .btn-secondary:active {
  background-color: #111111 !important;
  color: #ffffff !important;
  border: 2px solid #111111 !important;
  box-shadow: none !important;
  width: 80% !important;
  margin: 0 auto !important;
  float: none !important;
  display: block !important;
}

#blockcart-modal .cart-content-btn .btn-primary:hover i,
#blockcart-modal .cart-content-btn .btn-primary:hover .material-icons,
#blockcart-modal .cart-content-btn .btn-primary:hover::before,
#blockcart-modal .cart-content-btn .btn-primary:hover::after {
  display: none !important;
}

/* ==========================================================
   FOOTER : FILTRAGE SELECTIF DU BLOC "VOTRE COMPTE"
   ========================================================== */

/* 1. Masquer tous les liens par défaut du bloc compte footer */
#footer_account_list li {
  display: none !important;
}

/* 2. Réafficher UNIQUEMENT les liens essentiels
      - Connexion / Mon compte (controller=my-account)
      - Suivi de commande (controller=guest-tracking)
*/
#footer_account_list li:has(a[href*="controller=my-account"]),
#footer_account_list li:has(a[href*="controller=guest-tracking"]) {
  display: list-item !important;
}

/* ==========================================================
   SYNC BANNIÈRE HERO (ACCUEIL) — CLONE RITUEL PRO
   ========================================================== */

/* Alignement du bloc texte à gauche (comme le logo) */
body#index #carousel .caption.hxb-home-caption {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important; /* Force alignement à gauche */
  background: transparent !important;
  text-align: left !important;
  left: 5% !important; /* Marge identique à RITUEL PRO */
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 100% !important;
  max-width: 850px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Typographie harmonisée (Taille réduite pour élégance) */
body#index #carousel .caption.hxb-home-caption h2.hxb-title-massive {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: clamp(1.6rem, 3.8vw, 2.6rem) !important;
  line-height: 1.1 !important;
  margin: 0 0 20px 0 !important; /* Force reset pour Safari */
  text-transform: uppercase !important;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.4) !important;
  text-align: left !important;
}

/* Fix Safari : Alignement compact du libellé */
body#index #carousel .caption.hxb-home-caption .hxb-label {
  margin: 0 0 10px 0 !important;
  line-height: 1 !important;
  display: block !important;
}

/* Style du bouton Orange (Taille élégante) */
.hxb-apropos-btn.btn-orange {
  display: inline-block !important;
  background-color: #FF5C38 !important;
  color: #FFFFFF !important;
  padding: 10px 24px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  /* Effet de biseau : Coin supérieur droit tronqué */
  clip-path: polygon(0% 0%, 92% 0%, 100% 18%, 100% 100%, 0% 100%) !important;
  border-radius: 2px !important;
}

.hxb-apropos-btn.btn-orange:hover {
  background-color: #FFFFFF !important;
  color: #FF5C38 !important;
  transform: scale(1.05);
}

/* Suppression de la description pour un look plus "Pro" */
.hxb-home-caption .caption-description {
  display: none !important;
}

/* ==========================================================
   FIX UI/UX MOBILE & CLICS
   ========================================================== */

/* Bug 1 V2 : Sauts de ligne HTML conditionnels */
.hxb-mobile-br {
  display: none !important;
}

@media (max-width: 767px) {
  .hxb-mobile-br {
    display: block !important;
  }
  
  body#index #carousel .caption.hxb-home-caption h2.hxb-title-massive {
    font-size: clamp(1.2rem, 5vw, 1.8rem) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-break: break-word !important;
    margin-bottom: 10px !important;
    text-align: left !important; /* Assure l'alignement sur mobile */
  }
}

/* Bug 2 V2 : Titres de section (Custom Blocks) plus compacts sur mobile */
@media (max-width: 768px) {
  .custom-text-block h2 {
    font-size: 1.4rem !important;
    line-height: 1.25 !important;
    margin-bottom: 15px !important;
  }
  /* Aussi pour le bandeau rouge final au cas où */
  .hxb-cta-content h2 {
    font-size: 1.4rem !important;
    line-height: 1.25 !important;
  }
}

/* Bug 2 : Scroll horizontal fantôme (Mobile) */
@media (max-width: 768px) {
  html, body, #wrapper {
    overflow-x: hidden !important;
    width: 100% !important;
  }
}

/* ==========================================================
   MISSION D'AMELIORATION UI/UX GLOBALE
   ========================================================== */

/* Objectif 1 : Contraste de la Top Bar */
#header .header-nav {
  background-color: #8C7D6B !important; /* Beige bien plus foncé / Kaki clair */
  border-bottom: none !important;
}
#header .header-nav a,
#header .header-nav i,
#header .header-nav span,
#header .header-nav div {
  color: #FFFFFF !important;
}
#header .header-nav a:hover,
#header .header-nav i:hover,
#header .header-nav span:hover {
  color: var(--hxb-orange, #FF5C38) !important;
}

/* Objectif 2 : Masquer le bouton redondant Newsletter */
.block_newsletter form input[value="OK"],
.block_newsletter form .hidden-sm-up,
.btn-primary.hidden-sm-up {
  display: none !important;
}

/* Objectif 2 : Recentrage subtil du Logo */
#_desktop_logo {
  margin-left: 2.5rem !important;
}
@media (max-width: 768px) {
  #_desktop_logo {
    margin-left: 0 !important;
  }
}

/* Objectif 2 & 3 : Standardisation Chirurgicale (Pas touche aux natifs) */
.btn-orange,
.block_newsletter form input[name="submitNewsletter"]:not(.hidden-sm-up) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--hxb-orange, #FF5C38) !important;
  color: #FFFFFF !important;
  padding: 10px 24px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  clip-path: polygon(0% 0%, 92% 0%, 100% 18%, 100% 100%, 0% 100%) !important;
  border-radius: 2px !important;
  border: none !important;
  box-shadow: none !important;
}

.btn-orange:hover,
.block_newsletter form input[name="submitNewsletter"]:not(.hidden-sm-up):hover {
  background-color: #FFFFFF !important;
  color: var(--hxb-orange, #FF5C38) !important;
  transform: scale(1.05) !important;
}

/* Objectif 2 (Iteration finale) : Boutons DÉCOUVRIR totalement indépendants */
.hxb-btn-custom-orange {
    background-color: #FF5C38 !important; /* L'orange de la charte */
    color: #FFFFFF !important;
    margin-top: 25px !important; /* Crée l'espace avec le paragraphe au-dessus */
    padding: 12px 35px 12px 30px !important; 
    text-align: center !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    display: inline-block !important;
    text-decoration: none !important;
    border-radius: 3px !important; /* Ajuste si le bouton Hero est plus carré */
    clip-path: polygon(0% 0%, 92% 0%, 100% 18%, 100% 100%, 0% 100%) !important; /* Découpe en flèche */
    transition: all 0.3s ease;
}
.hxb-btn-custom-orange:hover {
    background-color: #D14900 !important; /* Orange plus foncé au survol */
    color: #FFFFFF !important;
}

/* ==========================================================
   CORRECTIF ECHELLE PAGE PRODUIT (DESKTOP) - Ligne de flottaison Agressive
   ========================================================== */
@media (min-width: 992px) {
    /* 1. Réduction drastique de l'espace global du bloc produit */
    body.page-product #main .row:first-of-type {
        max-width: 100% !important; /* héro en pleine largeur (était 980px) — s'aligne sur le reste */
        margin: 0 auto;
        padding-top: 30px !important; /* égalisé avec le bas du panneau (était 5px = haut écrasé) */
    }

    /* 2. Limite stricte en hauteur de l'image principale */
    body.page-product .product-cover {
        max-width: 100% !important;
        text-align: center !important;
        padding: 26px 18px !important;
    }
    body.page-product .product-cover img {
        max-height: 500px !important; /* image généreuse ; équilibre la colonne gauche avec la droite */
        width: auto !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }

    /* 3. Réduction agressive de la taille du titre (H1) */
    body.page-product h1.h1 {
        font-size: 1.6rem !important;
        line-height: 1.1 !important;
        margin-bottom: 5px !important;
    }

    /* 4. Réduction agressive du prix */
    body.page-product .current-price span[itemprop="price"] {
        font-size: 1.4rem !important;
    }

    /* 5. Écrasement total des marges parasites */
    body.page-product .product-information {
        margin-top: 0 !important;
    }
    
    body.page-product #product-description-short {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }
    
    body.page-product .product-quantities {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    /* 6. Rapprochement maximal du bloc d'ajout au panier */
    body.page-product .product-actions {
        margin-top: 5px !important;
        padding-top: 0 !important;
    }
}

/* ==========================================================
   ALIGNEMENT PRIX ET TAXE (TTC)
   ========================================================== */
body.page-product .product-prices {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}
body.page-product .tax-shipping-delivery-label {
    margin-left: 8px !important;
    font-size: 0.85em !important;
    color: #666666 !important;
    font-weight: normal !important;
    display: inline-block !important;
}

/* ==========================================================
   GRILLE PRODUITS CATEGORIE - 4 COLONNES (DESKTOP) VIA CSS GRID
   ========================================================== */
@media (min-width: 992px) {
    /* 1. Forcer le conteneur parent en CSS Grid */
    body#category #js-product-list .products,
    body#category .products.row {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    /* 2. Réinitialisation des enfants pour qu'ils s'adaptent naturellement */
    body#category #js-product-list .products .product-miniature,
    body#category #js-product-list .products article,
    body#category .products > div[class*="col-"] {
        max-width: 100% !important;
        width: auto !important;
        flex: none !important;
        margin: 0 !important;
    }
}

/* ==========================================================
   REASSURANCE BADGES UNDER ADD TO CART
   ========================================================== */
.hxb-reassurance-box {
  margin-top: 25px;
  padding: 15px;
  background-color: #1a1a1a;
  border: 1px solid #FF5C38;
  border-radius: 6px;
}

.hxb-reassurance-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.hxb-reassurance-item:last-child {
  margin-bottom: 0;
}

.hxb-reassurance-item i.material-icons {
  color: #FF5C38;
  font-size: 20px;
  margin-right: 10px;
  margin-top: 2px;
}

.hxb-reassurance-item span {
  color: #F0F0F0;
  font-size: 0.85rem;
  line-height: 1.4;
}

.hxb-reassurance-item span strong {
  color: #FFFFFF;
}

/* ==========================================================
   SECTION AVIS CLIENTS (TESTIMONIALS)
   ========================================================== */
.hxb-reviews-section {
  background-color: #080808;
  padding: 80px 2rem;
  border-top: 1px solid rgba(255, 92, 56, 0.15);
  border-bottom: 1px solid rgba(255, 92, 56, 0.15);
  margin-top: 50px;
}

.hxb-reviews-title {
  text-align: center;
  color: #FFFFFF !important;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 2.2rem;
  margin-bottom: 45px;
  position: relative;
}

.hxb-reviews-title::after {
  content: "///";
  display: block;
  color: #FF5C38;
  font-size: 1.2rem;
  margin-top: 10px;
  letter-spacing: 2px;
}

.hxb-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.hxb-review-card {
  background-color: #121212;
  border: 1px solid rgba(255, 92, 56, 0.15);
  border-radius: 8px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.hxb-review-card:hover {
  transform: translateY(-5px);
  border-color: #FF5C38;
}

.hxb-review-rating {
  margin-bottom: 15px;
}

.hxb-review-rating .star {
  color: #FF5C38;
  font-size: 20px;
  margin-right: 2px;
}

.hxb-review-text {
  color: #E0E0E0 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  font-style: italic;
  margin-bottom: 25px;
  flex-grow: 1;
  text-align: left !important;
}

.hxb-review-author {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1.1rem;
}

.hxb-review-meta {
  color: #FF5C38;
  font-size: 0.85rem;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 5px;
}

@media (max-width: 991px) {
  .hxb-reviews-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


/* === ENGAGEMENT FONDATION DES POMPIERS DU QUÉBEC (bloc informatif discret) — ajouté 2026-06-20 === */
.hxb-fondation {
  background-color: #f7f7f7;
  border-top: 1px solid #e6e6e6;
  padding: 40px 5%;
}
.hxb-fondation-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.hxb-fondation-logo {
  height: 64px;
  width: auto;
  flex: 0 0 auto;
  opacity: 0.9;
}
.hxb-fondation-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #555;
  max-width: 380px;
  text-align: left;
}
.hxb-fondation-text strong { color: #121212; font-weight: 700; }
@media (max-width: 600px) {
  .hxb-fondation-inner { flex-direction: column; gap: 16px; text-align: center; }
  .hxb-fondation-text { text-align: center; }
}

/* === BLOC COMPOSITION / INCI (fiches produit) — ajouté 2026-06-20 === */
.hxb-compo { margin: 30px 0; }
.hxb-compo-title { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; color:#121212; margin:0 0 2px; letter-spacing:.5px; }
.hxb-compo-sub { font-size:.9rem; color:#777; margin:0 0 16px; }
.hxb-actifs { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:12px; margin-bottom:18px; }
.hxb-actif { border:1px solid #ececec; border-top:3px solid #FF5C38; border-radius:8px; padding:12px 14px; background:#fff; }
.hxb-actif-name { display:block; font-weight:800; color:#121212; font-size:.98rem; }
.hxb-actif-benef { display:block; font-size:.82rem; color:#777; margin-top:3px; }
.hxb-inci { border:1px solid #ececec; border-radius:8px; background:#faf8f4; padding:14px 16px; margin-bottom:12px; }
.hxb-inci-head { font-weight:700; color:#121212; font-size:.95rem; margin-bottom:8px; }
.hxb-inci-list { font-size:.82rem; line-height:1.7; color:#666; margin:0; }
.hxb-inci-list strong { color:#121212; font-weight:700; }
.hxb-compo-links { font-size:.9rem; color:#555; margin:0 0 12px; }
.hxb-compo-links a { color:#FF5C38; font-weight:700; text-decoration:none; }
.hxb-compo-note { font-size:.8rem; color:#999; font-style:italic; margin:0; }
@media (max-width:600px){ .hxb-compo-title{ font-size:1.3rem; } }

/* === NEWSLETTER : refonte layout desktop (override propre, ajouté 2026-06-21) ===
   La structure d'origine (vibe-coding) éclate label/formulaire et inverse l'ordre vertical.
   On force un bloc centré, empilé et tenu : titre -> champ+bouton -> mention légale. */
@media (min-width: 768px) {
  html body #blockEmailSubscription_displayFooterBefore > .row {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    gap: 22px !important;
    text-align: center !important;
    /* carte contenue = relief sur le beige (identité conservée) */
    background: #f6efe4 !important;
    border: 1px solid #e3d8c6 !important;
    border-radius: 16px !important;
    padding: 38px 44px !important;
    box-shadow: 0 6px 22px rgba(26,26,26,0.06) !important;
  }
  html body #blockEmailSubscription_displayFooterBefore #block-newsletter-label {
    order: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }
  html body #blockEmailSubscription_displayFooterBefore > .row > .col-md-7 {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
  }
  html body #blockEmailSubscription_displayFooterBefore form .row > div:first-child {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }
  html body #blockEmailSubscription_displayFooterBefore .input-wrapper {
    flex: 0 1 340px !important;
    width: auto !important;
    margin: 0 !important;
    order: 0 !important; /* champ e-mail à gauche */
  }
  html body #blockEmailSubscription_displayFooterBefore input[type="submit"].btn-primary {
    float: none !important;
    margin: 0 !important;
    width: auto !important;
    order: 1 !important; /* bouton S'abonner à droite */
  }
  html body #blockEmailSubscription_displayFooterBefore form p {
    text-align: center !important;
    margin-top: 6px !important;
  }
}

/* === BLOC RÉASSURANCE PRODUIT : 4 mini-cartes premium en grille (2026-07-04) ===
   Grille responsive : 1 colonne sur mobile, plusieurs sur desktop (auto-fit).
   Chaque puce = mini-carte crème (même matière que l'écrin héro) + icône dans
   une pastille orange à gauche, titre charbon + description. Textes inchangés. */
body.page-product .blockreassurance_product {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 20px 0 28px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 14px !important;
}
body.page-product .blockreassurance_product > div {
  position: relative !important;
  background: #f6efe4 !important;
  border: 1px solid #e3d8c6 !important;
  border-radius: 14px !important;
  padding: 18px 18px 18px 66px !important;
  margin: 0 !important;
  box-shadow: 0 4px 16px rgba(26,26,26,0.04) !important;
  min-height: 40px !important;
}
body.page-product .blockreassurance_product > .clearfix {
  display: none !important; /* encart fantôme vide (clearfix du module) retiré */
}
/* icône dans une pastille orange, calée à gauche */
body.page-product .blockreassurance_product > div .item-product {
  position: absolute !important;
  left: 16px !important;
  top: 17px !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,92,56,0.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.page-product .blockreassurance_product .item-product img,
body.page-product .blockreassurance_product .item-product svg {
  width: 20px !important;
  height: 20px !important;
}
body.page-product .blockreassurance_product .item-product svg,
body.page-product .blockreassurance_product .item-product svg * {
  fill: var(--hxb-orange) !important;
}
body.page-product .blockreassurance_product .block-title {
  display: block !important;
  font-weight: 800 !important;
  color: #121212 !important;
  font-size: 0.95rem !important;
  line-height: 1.25 !important;
  margin: 0 0 3px !important;
}
body.page-product .blockreassurance_product > div p:not(.block-title) {
  color: #6b6256 !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* === ZONE 3 : DESCRIPTION sortie de l'accordéon — écrin crème lisible (2026-07-04) ===
   Même matière que l'écrin héro. Largeur de lecture confortable, titres Archivo.
   Textes 100% inchangés (sortis de l'accordéon replié, c'est tout). */
body.page-product .hxb-product-description {
  background: #f6efe4 !important;
  border: 1px solid #e3d8c6 !important;
  border-radius: 0 !important; /* angles nets (DA) — était 18px */
  padding: 30px 34px !important;
  margin: 4px 0 30px !important;
  box-shadow: 0 8px 30px rgba(26,26,26,0.06) !important;
}
body.page-product .hxb-product-description .product-description {
  max-width: 780px !important;
  margin: 0 auto !important;
  color: #2a2621 !important;
  font-size: 1.02rem !important;
  line-height: 1.72 !important;
}
body.page-product .hxb-product-description .product-description > p {
  margin: 0 0 16px !important;
}
body.page-product .hxb-product-description .product-description > h3 {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important;
  font-stretch: 87.5% !important;
  color: #121212 !important;
  font-size: 1.4rem !important;
  line-height: 1.15 !important;
  margin: 32px 0 12px !important;
}

/* === ZONE 5 : MODULE ROUTINE · 3 ÉTAPES — composant designé (2026-07-04) ===
   Boîtes 01·02·03 ; l'étape du produit courant passe en noir (façon maquette). */
body.page-product .hxb-routine {
  margin: 30px 0 !important;
  text-align: center !important;
}
body.page-product .hxb-routine-kicker {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--hxb-orange) !important;
  margin: 0 0 4px !important;
}
body.page-product .hxb-routine-title {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important;
  font-stretch: 87.5% !important;
  text-transform: uppercase !important;
  color: #121212 !important;
  font-size: 1.7rem !important;
  line-height: 1.05 !important;
  margin: 0 0 20px !important;
}
body.page-product .hxb-routine-steps {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}
body.page-product .hxb-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 20px 10px !important;
  border-radius: 14px !important;
  background: #f6efe4 !important;
  border: 1px solid #e3d8c6 !important;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
body.page-product .hxb-step:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(26,26,26,0.08) !important;
}
body.page-product .hxb-step-num {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.75rem !important;
  line-height: 1 !important;
  color: #c9bca6 !important;
}
body.page-product .hxb-step-label {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: #121212 !important;
}
/* étape active = le produit affiché → boîte noire, chiffre orange */
body.page-product .hxb-step.is-active {
  background: #121212 !important;
  border-color: #121212 !important;
}
body.page-product .hxb-step.is-active .hxb-step-num { color: var(--hxb-orange) !important; }
body.page-product .hxb-step.is-active .hxb-step-label { color: #ffffff !important; }

/* === ZONE 7 : BANDEAU MISSION NOIR — module designé (2026-07-04) ===
   Enveloppe le passage "Made in France, né au Canada" existant. Mots inchangés :
   seule la mise en boîte est nouvelle (noir + rayures orange en coin, façon maquette). */
body.page-product .hxb-mission {
  position: relative !important;
  overflow: hidden !important;
  background: #121212 !important;
  border-radius: 16px !important;
  padding: 30px 34px !important;
  margin: 34px 0 24px !important;
  box-shadow: 0 10px 34px rgba(26,26,26,0.14) !important;
}
/* rayures orange en coin droit (dans le sens de l'étiquette) */
body.page-product .hxb-mission::after {
  content: "" !important;
  position: absolute !important;
  top: 0; right: 0; bottom: 0;
  width: 84px !important;
  background: repeating-linear-gradient(50deg, #FF5C38 0 15px, #121212 15px 30px) !important;
}
body.page-product .hxb-mission > * {
  position: relative !important;
  z-index: 1 !important;
  max-width: calc(100% - 70px) !important;
}
body.page-product .hxb-mission h3 {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important;
  font-stretch: 87.5% !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  font-size: 1.55rem !important;
  line-height: 1.08 !important;
  margin: 0 0 12px !important;
}
body.page-product .hxb-mission p {
  color: #e7dcca !important;
  font-size: 0.98rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
body.page-product .hxb-mission p strong { color: #ffffff !important; }
@media (max-width: 600px) {
  body.page-product .hxb-mission { padding: 24px 22px !important; }
  body.page-product .hxb-mission::after { width: 60px !important; }
  body.page-product .hxb-mission h3 { font-size: 1.35rem !important; }
}

/* === HÉRO FICHE PRODUIT : panneau crème (après restructuration template) 2026-06-21 === */
body.page-product .product-container {
  background: #f6efe4 !important;
  border: 1px solid #e3d8c6 !important;
  border-radius: 0 !important; /* angles nets (DA) — était 18px */
  padding: 30px 34px !important;
  margin: 18px 0 28px !important;
  box-shadow: 0 8px 30px rgba(26,26,26,0.06) !important;
  display: flex !important;        /* le thème rendait .row en block -> forcé en flex */
  flex-wrap: wrap !important;      /* empilement mobile conservé */
  align-items: stretch !important; /* colonnes de même hauteur -> l'écrin rayé remplit la colonne image (pas de vide crème) */
}

/* === ANTI ÉCART BLANC (Safari/mobile) : beige sur html + pile du haut accueil (2026-06-21) === */
html { background-color: #CCB596 !important; }
body.page-index #content-wrapper,
body.page-index #main,
body.page-index #content.page-home,
body.page-index .carousel,
body.page-index .carousel-inner {
  background-color: #CCB596 !important;
}
body.page-index #content.page-home,
body.page-index #main { margin-top: 0 !important; }

/* === NEWSLETTER MOBILE : carte crème + un seul bouton (2026-06-21) === */
@media (max-width: 767px) {
  html body #blockEmailSubscription_displayFooterBefore > .row {
    background: #f6efe4 !important;
    border: 1px solid #e3d8c6 !important;
    border-radius: 14px !important;
    padding: 26px 20px !important;
    max-width: 430px !important;
    margin: 0 auto !important;
  }
  html body .block_newsletter .hidden-xs-down { display: inline-block !important; } /* garde 'S'abonner' */
  html body .block_newsletter .hidden-sm-up { display: none !important; }           /* cache 'ok' redondant */
  html body #blockEmailSubscription_displayFooterBefore .input-wrapper {
    order: 1 !important; width: 100% !important; margin-bottom: 12px !important;
  }
  html body #blockEmailSubscription_displayFooterBefore input[type="submit"] {
    order: 2 !important; width: 100% !important; float: none !important;
  }
}

/* === FIX écart Safari/WebKit : marge par défaut du <figure> dans le carousel (2026-06-21) === */
#carousel figure,
#carousel .carousel-item figure,
body.page-index .carousel figure {
  margin: 0 !important;
  padding: 0 !important;
}

/* === FIX écart WebKit (Safari/iOS) au-dessus du carousel : reset complet + image en block === */
#carousel, #carousel ul, #carousel ol, #carousel li,
#carousel .carousel-inner, #carousel .carousel-item, #carousel figure {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#carousel img, #carousel .carousel-item img, #carousel figure img {
  display: block !important;
  vertical-align: top !important;
}

/* === FIX écart WebKit : lien <a> vide en tête de slide qui pousse l'image (~16px) === */
#carousel .carousel-item > a {
  display: block !important;
  line-height: 0 !important;
  font-size: 0 !important;
}
#carousel .carousel-item figure { margin-top: 0 !important; }

/* === FIX DÉFINITIF écart WebKit : figure du slide en inline-block/baseline -> block === */
#carousel .carousel-item figure { display: block !important; vertical-align: top !important; }

/* ============================================================
   REFONTE CARTES PRODUIT (accueil + boutique) — 2026-06-22
   Carte crème + profondeur + liseré "marquage pompier" + badge ÉTAPE
   ============================================================ */
/* Carte = surface crème avec relief */
body.page-index .product-miniature .thumbnail-container,
body.page-category .product-miniature .thumbnail-container {
  background-color: #f6efe4 !important;
  border: 1px solid #e3d8c6 !important;
  border-radius: 0 !important; /* angles nets (DA) — était 16px */
  box-shadow: 0 8px 24px rgba(26,26,26,0.08) !important;
  width: 100% !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
body.page-index .product-miniature:hover .thumbnail-container,
body.page-category .product-miniature:hover .thumbnail-container {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 34px rgba(26,26,26,0.16) !important;
  background-color: #f6efe4 !important; background: #f6efe4 !important;
}
/* Zone image = écrin crème rayé, IDENTIQUE à l'écrin de la fiche produit (2026-07-05)
   Fines rayures diagonales 50deg (sens de l'étiquette) sur crème #f2e8d6, très subtiles.
   Uniformise le fond des vignettes (accueil/boutique) avec la fiche produit. */
body.page-index .product-miniature .thumbnail-top,
body.page-category .product-miniature .thumbnail-top {
  background:
    repeating-linear-gradient(50deg, rgba(150,128,96,0.09) 0 46px, rgba(150,128,96,0) 46px 92px),
    #f2e8d6 !important;
  border-bottom: 1px solid #efe6d6 !important;
}
/* Onglet "marquage pompier" (2026-07-05 — Piste 2) : détail discret dans le coin
   haut-gauche au lieu d'une bande pleine largeur. Rayures dans le sens de l'écrin
   (50deg) et orange légèrement adouci. Épouse le coin arrondi de la carte. */
body.page-index .product-miniature .thumbnail-container::before,
body.page-category .product-miniature .thumbnail-container::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: auto !important;
  width: 42% !important;
  height: 12px !important;
  background: repeating-linear-gradient(50deg, rgba(255,92,56,0.85) 0 11px, #f4ede1 11px 24px) !important;
  border-bottom-right-radius: 0 !important; /* angle net (DA) — était 3px */
  z-index: 6 !important;
}
/* Badge ÉTAPE propre (remplace le gros numéro contour) */
body.page-index .product-miniature .thumbnail-top::before,
body.page-category .product-miniature .thumbnail-top::before {
  content: "ÉTAPE 0" counter(etape-counter) !important;
  top: 26px !important; left: 16px !important;
  font-family: 'Archivo', sans-serif !important;
  font-size: 10px !important; font-weight: 700 !important;
  color: #ffffff !important; background: #1a1a1a !important;
  padding: 5px 9px !important; border-radius: 5px !important;
  letter-spacing: 1.5px !important; z-index: 7 !important;
  -webkit-text-stroke: 0 !important;
}
/* Masquer le gros numéro contour + le CTA texte (carte entièrement cliquable) */
body.page-index .product-miniature .thumbnail-top::after,
body.page-category .product-miniature .thumbnail-top::after { content: none !important; display: none !important; }
body.page-index .product-price-and-shipping::after,
body.page-category .product-price-and-shipping::after { content: none !important; display: none !important; }

/* === REFONTE CARTES : promo propre + badge étape masqué sur le coffret (2026-06-22) === */
/* Pastille PROMO orange unie (au lieu du rayé doublon), placée sous le liseré */
body.page-index .product-miniature .product-flags,
body.page-category .product-miniature .product-flags { top: 24px !important; right: 14px !important; gap: 6px !important; }
body.page-index .product-flags .product-flag.on-sale,
body.page-category .product-flags .product-flag.on-sale {
  display: inline-block !important;
  background: #FF5C38 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 800 !important; font-size: 11px !important;
  letter-spacing: .5px !important; text-transform: uppercase !important;
  padding: 5px 12px !important; border-radius: 20px !important;
  box-shadow: 0 4px 10px rgba(255, 92, 56,0.3) !important;
}
/* Masquer les doublons (-X€ et Pack) : le prix barré suffit */
body.page-index .product-flags .product-flag.discount,
body.page-category .product-flags .product-flag.discount,
body.page-index .product-flags .product-flag.pack,
body.page-category .product-flags .product-flag.pack { display: none !important; }
/* Masquer le badge ÉTAPE sur le coffret (produit "pack", pas une étape) */
body.page-index .product-miniature:has(.product-flag.pack) .thumbnail-top::before,
body.page-category .product-miniature:has(.product-flag.pack) .thumbnail-top::before { content: none !important; display: none !important; }

/* === PAGE PRODUIT : « 3 autres produits » (2026-07-04) === */
/* Bloc « X autres produits dans la même catégorie » : badges propres
   (comme catégorie/accueil) + titre stylé, au lieu du rendu brut d'origine. */
body.page-product .featured-products .product-flags {
  position: absolute !important;
  top: 24px !important; right: 14px !important;
  z-index: 5 !important; margin: 0 !important; padding: 0 !important;
  list-style: none !important; display: flex !important;
  flex-direction: column !important; gap: 6px !important;
  align-items: flex-end !important; pointer-events: none !important;
}
body.page-product .featured-products .product-flag { display: none !important; }
body.page-product .featured-products .product-flag.on-sale {
  display: inline-block !important;
  background: #FF5C38 !important; color: #ffffff !important; text-shadow: none !important;
  font-family: 'Archivo', sans-serif !important; font-weight: 800 !important;
  font-size: 11px !important; letter-spacing: .5px !important; text-transform: uppercase !important;
  padding: 5px 12px !important; border-radius: 20px !important;
  box-shadow: 0 4px 10px rgba(255,92,56,0.3) !important;
}
/* -X€ et Pack masqués : le prix barré suffit (comme sur catégorie/accueil) */
body.page-product .featured-products .product-flag.discount,
body.page-product .featured-products .product-flag.pack { display: none !important; }
/* badge « étape » parasite sur le coffret (pack) */
body.page-product .featured-products .product-miniature:has(.product-flag.pack) .thumbnail-top::before {
  content: none !important; display: none !important;
}
/* titre du bloc en Archivo, cohérent avec le reste de la fiche */
body.page-product .featured-products > h2 {
  font-family: 'Archivo', sans-serif !important; font-stretch: 87.5% !important;
  font-weight: 700 !important; text-transform: uppercase !important;
  color: #121212 !important; font-size: 1.45rem !important;
  letter-spacing: .3px !important; margin: 10px 0 22px !important;
}

/* ============================================================
   BLOCS ÉDITORIAUX ACCUEIL (style hellandback.co) — 2026-06-23
   ============================================================ */
.hxb-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6%;
  align-items: center;
  max-width: 1240px;
  margin: 80px auto;
  padding: 0 5%;
}
.hxb-ed-kicker {
  display: block;
  font-size: 0.85rem; font-weight: 800;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: #FF5C38; margin-bottom: 14px;
}
.hxb-ed-title {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 900; line-height: 0.95; letter-spacing: -1.5px;
  text-transform: uppercase; color: #1a1a1a;
  margin: 0 0 22px;
}
.hxb-ed-desc {
  font-size: 1.05rem; line-height: 1.65;
  color: #473d2f; max-width: 470px; margin: 0 0 6px;
}
/* Zone visuelle : photo à coin coupé + panneau de rayures en accent */
.hxb-ed-visual { position: relative; min-height: 440px; }
.hxb-ed-stripes {
  position: absolute; top: 26px; left: -12px;
  width: 130px; height: 86%;
  background: repeating-linear-gradient(135deg, #FF5C38 0 18px, #e0743c 18px 36px);
  border-radius: 8px; z-index: 1;
}
.hxb-ed-photo {
  position: absolute; top: 0; right: 0;
  width: 82%; height: 100%;
  background-size: cover; background-position: center;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(26,26,26,0.22);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px));
  z-index: 2;
}
/* Alternance : image à gauche */
.hxb-ed--imgleft .hxb-ed-text { grid-column: 2; }
.hxb-ed--imgleft .hxb-ed-visual { grid-column: 1; grid-row: 1; }
.hxb-ed--imgleft .hxb-ed-stripes { left: auto; right: -12px; }
.hxb-ed--imgleft .hxb-ed-photo {
  right: auto; left: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}
/* Responsive : empilé, image au-dessus */
@media (max-width: 820px) {
  .hxb-editorial { grid-template-columns: 1fr; gap: 26px; margin: 50px auto; }
  .hxb-ed--imgleft .hxb-ed-text, .hxb-ed--imgleft .hxb-ed-visual { grid-column: 1; }
  .hxb-ed-visual { min-height: 300px; grid-row: 1 !important; }
  .hxb-ed-text { grid-row: 2; }
}

/* Bloc "Notre histoire" : photo équipe panoramique (1290x588) -> format paysage, full visible */
.hxb-ed--team .hxb-ed-visual { min-height: 0 !important; }
.hxb-ed--team .hxb-ed-photo {
  position: relative !important;
  top: auto !important; right: auto !important;
  width: 88% !important;
  margin-left: auto !important;
  height: auto !important;
  aspect-ratio: 1290 / 588 !important;
}
.hxb-ed--team .hxb-ed-stripes { top: 14px !important; height: calc(100% - 28px) !important; }

/* (correctif barre beige v2) : remonter le .container de la newsletter (enfant direct de #content-wrapper) */



/* Accueil : supprime la barre beige foncée en bas. Cause = un <footer class="page-footer">
   vide (h=0) dans #main avec margin-bottom:25px, qui pousse la newsletter et laisse voir
   le fond beige foncé de #content-wrapper. On annule sa marge sur l'accueil. */
body.page-index .page-footer { margin-bottom: 0 !important; }

/* Responsive : empêche les titres géants de déborder du cadre sur mobile
   (mots longs type « PROTECTEUR » / « MULTIDISCIPLINAIRE »). Desktop inchangé (clamp plafonné). */
.products-section-title {
  font-size: clamp(1.6rem, 8vw, 52px) !important;
  overflow-wrap: break-word;
  word-break: break-word;
}
.hxb-apropos-hero h1,
.hxb-apropos-histoire h2,
.hxb-apropos-solutions h2,
.hxb-apropos-equipe h2,
.hxb-apropos-communaute h2,
.hxb-apropos-cta h2 {
  font-size: clamp(1.4rem, 6.5vw, 32px) !important;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Page PRO — bouton CTA bas de page : noir massif visible (était orange sur fond orange = invisible).
   Surcharge la règle .page-a-propos .hxb-apropos-btn.btn-orange via une spécificité supérieure. */
.page-a-propos .hxb-apropos-cta .hxb-apropos-btn.btn-orange {
  background-color: #121212 !important;
  color: #ffffff !important;
}
.page-a-propos .hxb-apropos-cta .hxb-apropos-btn.btn-orange:hover {
  background-color: #333333 !important;
}

/* Footer : ligne légale / copyright centrée à toutes les tailles
   (la classe text-center pouvait être écrasée par une règle text-align:left). */
.footer-container p.text-center,
.footer-container p.text-center span,
.footer-container p.text-center a { text-align: center !important; }

/* Page PRO — secteurs « Conçu pour » : coche ✓ au lieu du chevron (ne donne plus
   l'impression d'être cliquable, ne crée ni page ni pop-up) + note non-exhaustive. */
.page-a-propos .hxb-histoire-item img { display: none !important; }
.page-a-propos .hxb-histoire-item::before {
  content: "\2713";
  color: #FF5C38;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.4;
  margin-top: 1px;
  flex: 0 0 auto;
}
.page-a-propos .hxb-histoire-note {
  color: #9a9a9a;
  font-size: 0.95rem;
  font-style: italic;
  margin: 6px 0 18px;
}

/* Pages CMS PRO (#6) et POUR TOUS (#7) en pleine largeur comme l'accueil
   (fin des bandes beiges latérales). La règle existante body#cms.cms-7 ne
   matchait pas (classe réelle = cms-id-7) : on cible les wrappers directement. */
.page-a-propos,
.page-rituel-protecteur {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}
/* Sécurité responsive : padding horizontal sur les conteneurs internes qui n'en
   ont pas, pour que le texte ne colle pas aux bords en pleine largeur sur mobile. */
@media (max-width: 768px) {
  .page-rituel-protecteur .hxb-container,
  .page-rituel-protecteur .hxb-hero-content,
  .page-a-propos .hxb-apropos-hero-content {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

/* ===== POUR TOUS (#7) — page enrichie (thème sombre cohérent Hell and Back) ===== */
.page-rituel-protecteur { background-color: #121212 !important; }
.page-rituel-protecteur .hxb-section-header p {
  color: #b8b8b8; font-size: 1.05rem; max-width: 700px; margin: 14px auto 0; line-height: 1.5;
}
/* C'est pour qui — cartes profils */
.page-rituel-protecteur .hxb-persona-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 40px;
}
.page-rituel-protecteur .hxb-persona-card {
  background: #1c1c1c; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 24px 26px;
}
.page-rituel-protecteur .hxb-persona-card h3 {
  color: #FF5C38; font-size: 1.12rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 800; margin: 0 0 9px;
}
.page-rituel-protecteur .hxb-persona-card p { color: #b8b8b8; font-size: .98rem; line-height: 1.5; margin: 0; }
/* Pourquoi / Histoire — prose centrée */
.page-rituel-protecteur .hxb-prose { max-width: 780px; margin: 0 auto; }
.page-rituel-protecteur .hxb-prose p { color: #d2d2d2; font-size: 1.12rem; line-height: 1.8; text-align: center; margin: 0; }
/* Efficacité — statistiques */
.page-rituel-protecteur .hxb-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; margin-top: 44px; align-items: start;
}
.page-rituel-protecteur .hxb-stat { text-align: center; }
.page-rituel-protecteur .hxb-stat .num { display: block; font-size: 3.4rem; font-weight: 900; color: #FF5C38; line-height: 1; }
.page-rituel-protecteur .hxb-stat .lbl { display: block; color: #ddd; font-size: .98rem; margin-top: 12px; line-height: 1.4; }
.page-rituel-protecteur .hxb-stats-method { text-align: center; color: #888; font-size: .85rem; margin-top: 32px; font-style: italic; max-width: 760px; margin-left: auto; margin-right: auto; }

/* POUR TOUS — bloc 'Efficacité' : on retire la déco rayures derrière les stats
   (texte sans fond plein -> lisibilité). Les autres sections gardent la déco. */
.page-rituel-protecteur .hxb-dark-section:has(.hxb-stats-grid)::after { display: none !important; }

/* ===== POUR TOUS — anti-répétition + lisibilité ===== */
/* Grille profils en 3 colonnes : 6 cartes = 2 rangées pleines, équilibré (plus d'espace vide) */
.page-rituel-protecteur .hxb-persona-grid {
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)) !important;
}
/* La déco rayures ne se répète plus : retirée de la section profils (conservée sur « 3 étapes ») */
.page-rituel-protecteur .hxb-dark-section:has(.hxb-persona-grid)::after { display: none !important; }
/* Texte des cartes aligné à gauche (le justify hérité créait de gros écarts entre les mots) */
.page-rituel-protecteur .hxb-persona-card h3,
.page-rituel-protecteur .hxb-persona-card p,
.page-rituel-protecteur .hxb-step-text h3,
.page-rituel-protecteur .hxb-step-text p { text-align: left !important; }

/* Pages CMS PRO (#6) + POUR TOUS (#7) : le héros touche le menu comme l'accueil
   (suppression du padding-top du #wrapper + du fil d'ariane qui créaient une marge beige). */
body.cms-id-6 #wrapper,
body.cms-id-7 #wrapper { padding-top: 0 !important; }
body.cms-id-6 .breadcrumb,
body.cms-id-7 .breadcrumb { display: none !important; }
body.cms-id-6 #content.page-cms,
body.cms-id-7 #content.page-cms { padding-top: 0 !important; }

/* Pages CMS texte (mentions #2, CGV #3, confidentialité #8, cookies #9) : corps de
   texte gris (#7a7a7a) peu lisible sur le beige -> charbon lisible. */
body.cms-id-2 #content, body.cms-id-3 #content, body.cms-id-8 #content, body.cms-id-9 #content,
body.cms-id-2 #content p, body.cms-id-2 #content li, body.cms-id-2 #content strong,
body.cms-id-3 #content p, body.cms-id-3 #content li, body.cms-id-3 #content strong,
body.cms-id-8 #content p, body.cms-id-8 #content li, body.cms-id-8 #content strong,
body.cms-id-9 #content p, body.cms-id-9 #content li, body.cms-id-9 #content strong { color: #1a1a1a !important; }

/* ==========================================================
   CHARTE HELL AND BACK — POLICE OFFICIELLE ARCHIVO
   Chargee via Google Fonts dans _partials/head.tpl.
   Corps  = Archivo (largeur normale)
   Titres = Archivo SemiCondensed Bold (font-stretch 87.5%, 700)
   Remplace la police Manrope du theme classic.
   Habillage visuel uniquement — aucun contenu/texte modifie.
   ========================================================== */
html, body,
button, input, select, textarea, optgroup,
.form-control, .btn, .nav, .breadcrumb, p, li, a, span, div, label, td, th {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.products-section-title,
.hxb-ed-title,
.identity-text {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-stretch: 87.5%; /* Archivo SemiCondensed */
}

/* ==========================================================
   CHARTE — PISTE B : bandeau utilitaire (header-nav) en noir
   Le bandeau du haut (Contactez-nous / Connexion / Panier) passe
   en noir, textes clairs, panier en accent orange.
   Le header principal (logo/menu/recherche) reste beige.
   ========================================================== */
#header .header-nav {
  background-color: #121212 !important;
  border-bottom: none !important;
}
#header .header-nav a,
#header .header-nav i,
#header .header-nav span,
#header .header-nav .user-info,
#header .header-nav .user-info a {
  color: #F3ECE0 !important;
}
#header .header-nav a:hover,
#header .header-nav .user-info a:hover {
  color: var(--hxb-orange, #FF5C38) !important;
}
/* Panier = accent orange (élément de conversion) */
#header .header-nav .blockcart,
#header .header-nav .blockcart a,
#header .header-nav .blockcart .header,
#header .header-nav .blockcart i,
#header .header-nav .blockcart span,
#header .header-nav [id*="cart"] a,
#header .header-nav [id*="cart"] .header {
  color: var(--hxb-orange, #FF5C38) !important;
}

/* Footer : la colonne "Produits" (doublon du menu Boutique) est remplacee par le
   logo blanc officiel, en gardant sa case pour ne PAS decaler la grille (4 quarts). */
#footer .links > .row > .wrapper:first-child > * { display: none !important; }
#footer .links > .row > .wrapper:first-child {
  background: url('../img/logo-hb-principal-blanc.png') no-repeat center 2px;
  background-size: 150px auto;
  min-height: 88px;
}
@media (max-width: 767px) {
  #footer .links > .row > .wrapper:first-child {
    background-position: center 2px;
    min-height: 96px;
    margin-bottom: 8px;
  }
}

/* ============================================================
   FIX SCROLL TACTILE — vignettes produit (2026-07-05)
   Problème : au survol, l'image de la vignette zoome (scale 1.25) et la
   carte se soulève (translateY). Sur mobile, il n'y a pas de vrai survol :
   iOS/WebKit déclenche quand même ce :hover quand le doigt se pose, l'image
   grossit sous le doigt et « capture » le geste → le scroll est bloqué,
   l'utilisateur doit appuyer sur le côté pour descendre.
   Solution : sur les appareils SANS vrai survol (tactiles), on neutralise
   ces transformations. L'expérience souris (ordinateur) reste inchangée.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  body.page-index .product-miniature:hover .thumbnail-top img,
  body.page-category .product-miniature:hover .thumbnail-top img,
  body.page-index .product-miniature .thumbnail-top img,
  body.page-category .product-miniature .thumbnail-top img {
    transform: none !important;
    transition: none !important;
  }
  body.page-index .product-miniature:hover .thumbnail-container,
  body.page-category .product-miniature:hover .thumbnail-container {
    transform: none !important;
  }
  /* Laisse le geste vertical passer : la vignette ne capte plus le scroll */
  body.page-index .product-miniature,
  body.page-category .product-miniature,
  body.page-index .product-miniature .thumbnail-container,
  body.page-category .product-miniature .thumbnail-container,
  body.page-index .product-miniature .thumbnail-top img,
  body.page-category .product-miniature .thumbnail-top img {
    touch-action: pan-y !important;
  }
}

/* ============================================================
   GALERIE MINIATURES FICHE PRODUIT — mini-écrins crème (2026-07-06)
   Avant : miniatures nues sur le beige + contour cyan natif PrestaShop (moche,
   jure avec la charte). Après : tuiles crème arrondies, cohérentes avec l'écrin
   héro, liseré orange sur la miniature active. Desktop + mobile. Flèches virées.
   ============================================================ */
/* MINIATURES — bande VERTICALE à gauche de l'image (2026-07-06, validé au navigateur).
   Pourquoi : en bande horizontale SOUS l'image, dès que la colonne droite est plus
   haute (Apple Pay/Link/avis, variable selon largeur + chargement) il restait un vide
   crème sous les vignettes. En bande verticale + écrin qui remplit la hauteur, ce vide
   est occupé par l'écrin rayé (motif designé) → plus aucun crème plat. Colonnes en flex
   de même hauteur ; l'écrin (order 2) prend la largeur restante, image centrée ; la
   bande miniatures (order 1) reçoit le MÊME fond rayé, vignettes centrées. */
body.page-product .product-container > .col-md-6:first-child {
  display: flex !important;
  flex-direction: column !important;
}
body.page-product .product-container > .col-md-6:first-child #content.page-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
body.page-product .images-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  flex: 1 1 auto !important;
  gap: 12px !important;
}
body.page-product .product-cover {
  order: 2 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
}
body.page-product .images-container .js-qv-mask.mask {
  order: 1 !important;
  flex: 0 0 96px !important;
  width: 96px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 10px 3px !important;
  height: auto !important;
  overflow: visible !important;
  background:
    repeating-linear-gradient(50deg, rgba(150,128,96,0.09) 0 46px, rgba(150,128,96,0) 46px 92px),
    #f2e8d6 !important;
}
body.page-product .images-container .product-images {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  justify-content: center !important;
}
body.page-product .product-images > li.thumb-container {
  width: 82px !important;
  height: 82px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  border: 2px solid #e3d8c6 !important;
  border-radius: 0 !important; /* angles nets (DA Hell and Back) */
  background: #f2e8d6 !important;
  box-shadow: 0 3px 8px rgba(26,26,26,0.06) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
body.page-product .product-images > li.thumb-container img.thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  mix-blend-mode: multiply !important;
  border: none !important;
  outline: none !important;
}
body.page-product .product-images > li.thumb-container:hover {
  border-color: #cbb9a0 !important;
}
/* Miniature active : liseré orange (remplace le contour cyan PrestaShop) */
body.page-product .product-images > li.thumb-container:has(img.selected) {
  border-color: #FF5C38 !important;
  box-shadow: 0 4px 12px rgba(255,92,56,0.22) !important;
}
/* Neutralise le contour cyan natif directement sur l'image sélectionnée */
body.page-product .product-images img.thumb.selected {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
/* Flèches de défilement inutiles : les miniatures tiennent sur la ligne (sinon elles passent à la ligne suivante) */
body.page-product .scroll-box-arrows {
  display: none !important;
}
/* MOBILE : la bande verticale serait à l'étroit -> miniatures horizontales sous l'image */
@media (max-width: 767px) {
  body.page-product .images-container {
    flex-direction: column !important;
    gap: 12px !important;
  }
  body.page-product .product-cover { order: 1 !important; }
  body.page-product .images-container .js-qv-mask.mask {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    flex-direction: row !important;
    justify-content: center !important;
    background: transparent !important;
    padding: 0 !important;
  }
  body.page-product .images-container .product-images {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  body.page-product .product-images > li.thumb-container {
    width: 76px !important;
    height: 76px !important;
    margin: 0 !important;
  }
}

/* =====================================================================
   SPRINT « 3 VENTES » — 2 quick wins conversion (2026-07-23)
   1) Réassurance livraison collée au bouton d'achat
   2) CTA « ajouter au panier » fixe en bas d'écran sur mobile
   Réversible : supprimer ce bloc + le <div class="hxb-ship-reassure">
   dans catalog/_partials/product-add-to-cart.tpl
   ===================================================================== */

/* --- 1) Réassurance livraison sous le bouton --- */
.hxb-ship-reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--hxb-dark, #121212);
}
.hxb-ship-reassure .hxb-ship-item {
  position: relative;
  padding-left: 20px;
}
.hxb-ship-reassure .hxb-ship-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 11px;
  height: 3px;
  background: var(--hxb-orange, #FF5C38);
}
.hxb-ship-reassure .hxb-ship-free {
  font-weight: 700;
  color: var(--hxb-orange, #FF5C38);
}

/* --- 2) CTA d'achat fixe en bas sur mobile --- */
@media (max-width: 767px) {
  body#product .product-add-to-cart .add,
  body.page-product .product-add-to-cart .add {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.16);
    z-index: 900;
  }
  body#product .product-add-to-cart .add .btn.add-to-cart,
  body.page-product .product-add-to-cart .add .btn.add-to-cart {
    width: 100%;
    justify-content: center;
  }
  /* de la place pour que la barre ne masque pas le bas de page */
  body#product,
  body.page-product {
    padding-bottom: 88px;
  }
  /* la réassurance reste visible dans le flux, au-dessus de la barre */
  .hxb-ship-reassure {
    margin-top: 10px;
    font-size: 13.5px;
  }
}

/* ---------------------------------------------------------------------
   FIX COLLISION MOBILE (2026-07-23) : le widget tarteaucitron
   « Gestion des services » (bottom:0, z-index 2147483646) recouvrait la
   fin du bouton sticky « Ajouter au panier ».
   On remonte le widget AU-DESSUS de la barre d'achat plutot que de jouer
   au plus haut z-index : la gestion des cookies doit rester accessible.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  body#product #tarteaucitronIcon,
  body.page-product #tarteaucitronIcon,
  body#product #tarteaucitronAlertSmall,
  body.page-product #tarteaucitronAlertSmall,
  body#product .tarteaucitronIconBottomRight,
  body.page-product .tarteaucitronIconBottomRight,
  body#product .tarteaucitronAlertSmallBottom,
  body.page-product .tarteaucitronAlertSmallBottom {
    bottom: 96px !important;
  }

  /* La barre d'achat occupe toute la largeur, sans rien par-dessus a droite */
  body#product .product-add-to-cart .add,
  body.page-product .product-add-to-cart .add {
    z-index: 950;
  }
  body#product .product-add-to-cart .add .btn.add-to-cart,
  body.page-product .product-add-to-cart .add .btn.add-to-cart {
    width: 100%;
    min-height: 52px;   /* cible tactile confortable */
  }
}

/* =====================================================================
   FIX PARCOURS MOBILE v2 (2026-07-23) — apres check iPhone reel.
   Le fix v1 (bottom:96px) echouait : tarteaucitron injecte son CSS au
   RUNTIME, donc apres custom.css. A specificite egale (#id) et avec
   !important des deux cotes, c'est le sien qui gagnait.
   On passe donc a `html body #id` (specificite 1,0,2 > 1,0,0) : on gagne
   quel que soit l'ordre d'injection.
   ===================================================================== */
@media (max-width: 767px) {
  /* 1. Pastille flottante « Gestion des services » masquee sur mobile.
        Conformite assuree par le lien « Gerer les cookies » en pied de page. */
  html body #tarteaucitronIcon,
  html body #tarteaucitronAlertSmall,
  html body div.tarteaucitronIconBottomRight,
  html body div.tarteaucitronAlertSmallBottom {
    display: none !important;
  }

  /* 2. La barre d'achat sticky : fond plein, rien ne doit passer dessus */
  body#product .product-add-to-cart .add,
  body.page-product .product-add-to-cart .add {
    background: #ffffff !important;
    z-index: 2147483000 !important;
  }
}

/* 3. Boutons du pop-up panier : centrage vertical robuste (flex plutot
      que de bricoler des paddings selon la hauteur). */
#blockcart-modal .btn,
#blockcart-modal .cart-content-btn .btn,
#blockcart-modal .modal-footer .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

/* 4. Lien de conformite injecte en pied de page */
.hxb-cookie-link {
  display: inline-block;
  margin: 14px 0;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
}

/* =====================================================================
   FIX PARCOURS MOBILE v3 (2026-07-23) — apres 2e check iPhone reel.
   BLOQUANT trouve : en v2 j'avais donne z-index 2147483000 a la barre
   sticky d'achat pour passer devant la pastille cookies. Resultat : elle
   passait aussi devant la modale panier (z-index Bootstrap 1050), donc
   elle recouvrait le bouton COMMANDER et bloquait le scroll de la modale.
   Correction : la barre repasse SOUS la modale, et disparait des que la
   modale est ouverte.
   ===================================================================== */

/* --- 1) Barre sticky d'achat : uniquement fiche produit, jamais par-dessus
       la modale panier ni la page panier. --- */
@media (max-width: 767px) {
  html body#product .product-add-to-cart .add,
  html body.page-product .product-add-to-cart .add {
    z-index: 900 !important;           /* < backdrop 1040 < modale 1050 */
  }
  /* modale panier ouverte -> la barre s'efface completement */
  html body.modal-open .product-add-to-cart .add,
  html body.modal-open .hxb-ship-reassure {
    display: none !important;
  }
  /* ceinture + bretelles : hors fiche produit, aucune barre fixe */
  html body:not(#product):not(.page-product) .product-add-to-cart .add {
    position: static !important;
    box-shadow: none !important;
  }
  html body:not(#product):not(.page-product) {
    padding-bottom: 0 !important;
  }
}

/* --- 2) Modale panier : toujours scrollable jusqu'en bas, CTA atteignables --- */
@media (max-width: 767px) {
  html body #blockcart-modal {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  html body #blockcart-modal .modal-dialog {
    margin: 8px auto !important;
    max-width: calc(100% - 16px) !important;
  }
  html body #blockcart-modal .modal-content {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 16px) !important;
  }
  html body #blockcart-modal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px !important;
  }
  /* les 2 CTA empiles et colles en bas de la modale : plus jamais hors ecran */
  html body #blockcart-modal .cart-content-btn {
    position: sticky !important;
    bottom: 0 !important;
    flex-direction: column-reverse !important;  /* COMMANDER au-dessus */
    gap: 10px !important;
    background: #CCB596 !important;   /* beige de la marque, comme le corps de la modale */
    padding: 12px 0 4px !important;
    margin-top: 8px !important;
    z-index: 5 !important;
  }
}

/* --- 3) Centrage vertical reellement robuste des boutons de la modale.
       Cause du decalage : l'icone <i class="material-icons"> dans le bouton
       COMMANDER (line-height propre de 24px) + paddings verticaux inegaux.
       On supprime les paddings verticaux et on centre en flex : le texte est
       alors centre quelles que soient les metriques de police. --- */
html body #blockcart-modal .cart-content-btn .btn,
html body #blockcart-modal .cart-content-btn .btn-primary,
html body #blockcart-modal .cart-content-btn .btn-secondary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0 14px !important;
  line-height: 1 !important;
  text-align: center !important;
}
html body #blockcart-modal .cart-content-btn .btn i.material-icons {
  display: none !important;   /* l'icone deportait le texte vers le bas */
}

/* =====================================================================
   PAGE PANIER : reskin marque (2026-07-23)
   Le bleu PrestaShop par defaut (#24b9d7) ressortait sur /panier.
   On repasse en orange marque #FF5C38. Le bouton Apple Pay noir n'est
   pas touche (il n'utilise pas .btn-primary).
   ===================================================================== */
body#cart .btn-primary,
body.page-cart .btn-primary,
body#cart .checkout .btn-primary,
body.page-cart .checkout .btn-primary {
  background-color: #FF5C38 !important;
  border-color: #FF5C38 !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
body#cart .btn-primary:hover,
body#cart .btn-primary:focus,
body#cart .btn-primary:active,
body.page-cart .btn-primary:hover,
body.page-cart .btn-primary:focus,
body.page-cart .btn-primary:active {
  background-color: #E04A2A !important;
  border-color: #E04A2A !important;
  color: #ffffff !important;
}
body#cart .btn-primary.disabled,
body#cart .btn-primary:disabled,
body.page-cart .btn-primary.disabled,
body.page-cart .btn-primary:disabled {
  background-color: #CCB596 !important;
  border-color: #CCB596 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* liens et icones : plus de bleu */
body#cart a:not(.btn),
body.page-cart a:not(.btn) {
  color: #121212;
}
body#cart a:not(.btn):hover,
body#cart a:not(.btn):focus,
body.page-cart a:not(.btn):hover,
body.page-cart a:not(.btn):focus {
  color: #FF5C38;
}
body#cart .material-icons,
body.page-cart .material-icons {
  color: inherit;
}

/* prix : noir de marque, total en orange */
body#cart .product-price,
body#cart .cart-summary-line .value,
body#cart .product-line-info .price,
body#cart .current-price,
body.page-cart .product-price,
body.page-cart .cart-summary-line .value,
body.page-cart .product-line-info .price,
body.page-cart .current-price {
  color: #121212 !important;
}
body#cart .cart-summary-line.cart-total .value,
body#cart .cart-total .value,
body.page-cart .cart-summary-line.cart-total .value,
body.page-cart .cart-total .value {
  color: #FF5C38 !important;
  font-weight: 700 !important;
}