/*
Theme Name: Divi Child
Description: Design System Multi-Brand unifié pour Kiwi Technologies & WEHOOP.
Author: Kiwi Technologies
Author URI: https://kiwi.ca
Template: Divi
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: divi-child
*/

/* ==========================================================================
   1. POLICES SYSTEME & RENDU CONSOLIDÉ
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800;900&display=swap');

body, h1, h2, h3, h4, h5, h6, p, span, button {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

h1, h2, .wh-hero-title, .wh-section-title-light, .wh-section-title-dark {
  font-weight: 900 !important;
}

.wh-cta-blue-banner h2 {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

sup {
  font-size: 0.55em !important;
  vertical-align: super !important;
  line-height: 0 !important;
}

/* ==========================================================================
   2. VARIABLES MULTI-BRAND & TOKENS SYSTEM UNIFIÉ
   ========================================================================== */

:root, [data-brand="kiwi"] {
  --brand-primary: #B08968;        /* Bronze Kiwi Officiel */
  --brand-primary-hover: #967252;  /* Bronze Foncé */
  --brand-accent: #B08968;
  --brand-dark: #0F172A;            /* Sombre Ardoise */
  --brand-dark-light: #1E293B;
  --brand-bg-light: #F8FAFC;
  --brand-border: #E2E8F0;

  --brand-logo-fn: url('/i/logo-kiwi-fn.svg');
  --brand-logo-fp: url('/i/logo-kiwi-fp.svg');
  --brand-signature-fn: url('/i/signature-kiwi-fn.svg');
  --brand-signature-fp: url('/i/signature-kiwi-fp.svg');
  --brand-icon-fn: url('/i/icon-kiwi-fn.svg');
  --brand-icon-fp: url('/i/icon-kiwi-fp.svg');
}

[data-brand="wehoop"],
[data-brand="wehoop-classic"] {
  --brand-primary: #00A3E0;        /* Cyan WEHOOP */
  --brand-primary-hover: #0082B3;
  --brand-accent: #00A3E0;
  --brand-dark: #0B132B;            /* Bleu Nuit */
  --brand-dark-light: #1C2541;
  --brand-bg-light: #F1F5F9;
  --brand-border: #E2E8F0;

  --brand-logo-fn: url('/i/logo-wehoop-fn.svg');
  --brand-logo-fp: url('/i/logo-wehoop-fp.svg');
  --brand-signature-fn: url('/i/signature-wehoop-fn.svg');
  --brand-signature-fp: url('/i/signature-wehoop-fp.svg');
  --brand-icon-fn: url('/i/icon-wehoop-fn.svg');
  --brand-icon-fp: url('/i/icon-wehoop-fp.svg');
}

[data-brand="wehoop-classic"] {
  --brand-logo-fn: url('/i/logo-wehoop-classic-fn.svg');
  --brand-logo-fp: url('/i/logo-wehoop-classic-fp.svg');
  --brand-signature-fn: url('/i/signature-wehoop-classic-fn.svg');
  --brand-signature-fp: url('/i/signature-wehoop-classic-fp.svg');
}

[data-brand="stage"], 
[data-brand="stageplus"] {
  --brand-primary: #00A3E0;
  --brand-primary-hover: #0082B3;
  --brand-accent: #00A3E0;
  --brand-dark: #0B132B;
  --brand-dark-light: #1C2541;
  --brand-bg-light: #F0F9FF;
  --brand-border: #BAE6FD;

  --brand-logo-fn: url('/i/logo-stageplus-fn.svg');
  --brand-logo-fp: url('/i/logo-stageplus-fp.svg');
  --brand-signature-fn: url('/i/signature-stageplus-fn.svg');
  --brand-signature-fp: url('/i/signature-stageplus-fp.svg');
  --brand-icon-fn: url('/i/icon-stageplus-fn.svg');
  --brand-icon-fp: url('/i/icon-stageplus-fp.svg');
}

[data-brand="equipa"] {
  --brand-primary: #EE5A24;        /* Orange Équipa */
  --brand-primary-hover: #D64205;
  --brand-accent: #EE5A24;
  --brand-secondary: #00A3E0;
  --brand-dark: #0F172A;
  --brand-dark-light: #1E293B;
  --brand-bg-light: #FFF7ED;
  --brand-border: #FFEDD5;

  --brand-logo-fn: url('/i/logo-equipa-fn.svg');
  --brand-logo-fp: url('/i/logo-equipa-fp.svg');
  --brand-signature-fn: url('/i/signature-equipa-fn.svg');
  --brand-signature-fp: url('/i/signature-equipa-fp.svg');
  --brand-icon-fn: url('/i/icon-equipa-fn.svg');
  --brand-icon-fp: url('/i/icon-equipa-fp.svg');
}

[data-brand="traceabl"] {
  --brand-primary: #1D4ED8;        /* Bleu Électrique Traceabl */
  --brand-primary-hover: #1E40AF;
  --brand-accent: #1D4ED8;
  --brand-secondary: #3B82F6;
  --brand-dark: #0F172A;
  --brand-dark-light: #1E293B;
  --brand-bg-light: #EFF6FF;
  --brand-border: #DBEAFE;

  --brand-logo-fn: url('/i/logo-traceabl-fn.svg');
  --brand-logo-fp: url('/i/logo-traceabl-fp.svg');
  --brand-signature-fn: url('/i/signature-traceabl-fn.svg');
  --brand-signature-fp: url('/i/signature-traceabl-fp.svg');
  --brand-icon-fn: url('/i/icon-traceabl-fn.svg');
  --brand-icon-fp: url('/i/icon-traceabl-fp.svg');
}

.brand-accent { color: var(--brand-accent) !important; }

/* ==========================================================================
   3. RESET & LAYOUT GLOBAL
   ========================================================================== */

html {
  scroll-behavior: smooth !important;
}

html, body, #page-container, #et-boc, #main-content {
  max-width: 100vw !important;
  width: 100% !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #FFFFFF !important;
}

body {
  padding-top: 0 !important; /* CORRECTION : Suppression du vide sous le header fixe */
  color: #0F172A !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

body.wh-has-modal-open {
  overflow: hidden !important;
}

.entry-content, .container, .et_pb_section, .et_pb_row, .et_pb_column {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.et_pb_module { margin-bottom: 0 !important; }
img { max-width: 100% !important; height: auto !important; }

.wh-header-logo img,
.wh-header-logo-img {
  height: 2.25rem !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
  content: var(--brand-icon-fn, url('/i/icon-wehoop-fn.svg')) !important;
}

.kiwi-footer-signature {
  height: 2.5rem !important;
  max-height: 2.5rem !important;
  width: auto !important;
  max-width: 14rem !important;
  display: block !important;
  object-fit: contain !important;
}

/* Masquage des blocs d'impression en mode Web */
.print-only-header,
.print-only-footer {
  display: none !important;
}

/* ==========================================================================
   4. ÉLÉMENTS ATOMIQUES (BOUTONS, TAGS, PILLS)
   ========================================================================== */

a.btn-primary, button.btn-primary, .btn-primary,
a.wh-btn-primary, button.wh-btn-primary, .wh-btn-primary,
a.btn-brand, button.btn-brand, .btn-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--brand-primary, #B08968) !important;
  color: #FFFFFF !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 0 1.75rem !important;
  height: 3.25rem !important;
  border-radius: 3.125rem !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  width: auto !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
  box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.08) !important;
}

a.btn-primary:hover, button.btn-primary:hover, .btn-primary:hover,
a.wh-btn-primary:hover, button.wh-btn-primary:hover, .wh-btn-primary:hover,
a.btn-brand:hover, button.btn-brand:hover, .btn-brand:hover {
  background-color: var(--brand-primary-hover, #967252) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.15) !important;
}

a.btn-dark, button.btn-dark, .btn-dark,
a.wh-btn-dark, button.wh-btn-dark, .wh-btn-dark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--brand-dark, #0F172A) !important;
  color: #FFFFFF !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 0 2.25rem !important;
  height: 3.25rem !important;
  border-radius: 3.125rem !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  width: auto !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

a.btn-dark:hover, button.btn-dark:hover, .btn-dark:hover,
a.wh-btn-dark:hover, button.wh-btn-dark:hover, .wh-btn-dark:hover {
  background-color: var(--brand-dark-light, #1E293B) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}

.hero-actions-wrap {
  display: flex !important;
  gap: 1.25rem !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 2rem !important;
  width: 100% !important;
}

.wh-btn-center-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 1.5rem !important;
}

.et_pb_button.no-hover-icon:after,
.et_pb_button.btn-primary:after,
.et_pb_button.btn-brand:after {
  display: none !important;
  content: "" !important;
}

.block-tag, .wh-tag-mono {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.8125rem !important;
  color: var(--brand-primary) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* BADGES ET PILLS DYNAMIQUES */
.card-pill, 
.wh-card-pill, 
.wh-nav-desktop-wrap .card-pill, 
.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: var(--brand-primary) !important;
  background-color: rgba(15, 23, 42, 0.04) !important;
  border: 1px solid var(--brand-border) !important;
  font-size: 0.8125rem !important;
  font-weight: 800 !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: 3.125rem !important;
  line-height: 1.3 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
}

[data-brand="traceabl"] .hero-badge,
[data-brand="traceabl"] .card-pill {
  background-color: rgba(29, 78, 216, 0.08) !important;
  border-color: rgba(29, 78, 216, 0.2) !important;
}

[data-brand="equipa"] .hero-badge,
[data-brand="equipa"] .card-pill {
  background-color: rgba(238, 90, 36, 0.08) !important;
  border-color: rgba(238, 90, 36, 0.2) !important;
}

[data-brand="wehoop"] .hero-badge,
[data-brand="wehoop"] .card-pill,
[data-brand="stageplus"] .hero-badge,
[data-brand="stageplus"] .card-pill {
  background-color: rgba(0, 163, 224, 0.08) !important;
  border-color: rgba(0, 163, 224, 0.2) !important;
}

[data-brand="kiwi"] .hero-badge,
[data-brand="kiwi"] .card-pill {
  background-color: rgba(176, 137, 104, 0.08) !important;
  border-color: rgba(176, 137, 104, 0.2) !important;
}

.block-hero .hero-badge,
.wh-hero-section .hero-badge,
.hero-badge {
  margin-top: 0 !important;
  margin-bottom: 1.75rem !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: break-word !important;
}

h2, .wh-section-title-light, .wh-section-title-dark {
  font-size: clamp(1.75rem, 4.5vw, 2.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

.wh-section-title-dark, h2.wh-section-title-dark { color: #FFFFFF !important; }
.wh-section-title-light, h2.wh-section-title-light { color: #0F172A !important; }

/* DESCRIPTION DE SECTION */
.wh-section-desc,
.block-grid-cards p.wh-section-desc,
.wh-container > p {
  font-size: clamp(1rem, 2.2vw, 1.125rem) !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  max-width: 52rem !important;
  margin: 1rem auto 3rem auto !important;
  padding-bottom: 0.5rem !important;
  text-align: inherit !important;
}

/* ==========================================================================
   5. BLOCS DU DESIGN SYSTEM & SECTIONS SOMBRES
   ========================================================================== */

/* HERO FULL BLEED DYNAMIQUE MULTI-BRAND (/i/hero-*.jpg) */
.block-hero, .wh-hero-section {
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  margin-bottom: 4rem !important;
  box-sizing: border-box !important;

  /* Image de fond par défaut (Fallback Kiwi) */
  background: 
    linear-gradient(
      180deg, 
      rgba(15, 23, 42, 0.65) 0%,   
      rgba(15, 23, 42, 0.50) 50%,  
      rgba(15, 23, 42, 0.85) 100%  
    ),
    url('/i/hero-kiwi-ca.jpg') center center / cover no-repeat !important;

  padding: 6.5rem 1.5rem 4.5rem 1.5rem !important;
  color: #FFFFFF !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 70vh !important;
  overflow: hidden !important;
}

/* 1. DÉCLINAISONS AUTOMATIQUES PAR DATA-BRAND */
[data-brand="traceabl"] .block-hero,
.block-hero[data-brand="traceabl"] {
  background-image: 
    linear-gradient(180deg, rgba(15, 23, 42, 0.65) 0%, rgba(15, 23, 42, 0.50) 50%, rgba(15, 23, 42, 0.85) 100%),
    url('/i/hero-traceabl-com.jpg') !important;
}

[data-brand="equipa"] .block-hero,
.block-hero[data-brand="equipa"] {
  background-image: 
    linear-gradient(180deg, rgba(15, 23, 42, 0.65) 0%, rgba(15, 23, 42, 0.50) 50%, rgba(15, 23, 42, 0.85) 100%),
    url('/i/hero-equipa-ca.jpg') !important;
}

[data-brand="stage"],
[data-brand="stageplus"] .block-hero,
.block-hero[data-brand="stageplus"] {
  background-image: 
    linear-gradient(180deg, rgba(15, 23, 42, 0.65) 0%, rgba(15, 23, 42, 0.50) 50%, rgba(15, 23, 42, 0.85) 100%),
    url('/i/hero-stageplus-ca.jpg') !important;
}

[data-brand="wehoop"] .block-hero,
.block-hero[data-brand="wehoop"] {
  background-image: 
    linear-gradient(180deg, rgba(15, 23, 42, 0.65) 0%, rgba(15, 23, 42, 0.50) 50%, rgba(15, 23, 42, 0.85) 100%),
    url('/i/hero-wehoop-com.jpg') !important;
}

/* 2. SURCHARGES DIRECTES PAR SLUG D'URL ET CLASSES DÉDIÉES (STAGING & PROD) */

/* TRACEABL (Pages /solutions/traceabl/ ou sous-domaine/domaine traceabl) */
body[class*="traceabl"] .block-hero,
body[class*="traceabl"] .wh-hero-section,
.block-hero.wh-hero-traceabl,
.wh-hero-section.wh-hero-traceabl {
  background-image: 
    linear-gradient(180deg, rgba(15, 23, 42, 0.65) 0%, rgba(15, 23, 42, 0.50) 50%, rgba(15, 23, 42, 0.85) 100%),
    url('/i/hero-traceabl-com.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* ÉQUIPA (Pages /solutions/equipa/ ou domaine equipa.ca) */
body[class*="equipa"] .block-hero,
body[class*="equipa"] .wh-hero-section,
.block-hero.wh-hero-equipa,
.wh-hero-section.wh-hero-equipa {
  background-image: 
    linear-gradient(180deg, rgba(15, 23, 42, 0.65) 0%, rgba(15, 23, 42, 0.50) 50%, rgba(15, 23, 42, 0.85) 100%),
    url('/i/hero-equipa-ca.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* STAGE+ (Pages /solutions/stageplus/ ou domaine stageplus.ca) */
body[class*="stage"] .block-hero,
body[class*="stage"] .wh-hero-section,
.block-hero.wh-hero-stageplus,
.wh-hero-section.wh-hero-stageplus {
  background-image: 
    linear-gradient(180deg, rgba(15, 23, 42, 0.65) 0%, rgba(15, 23, 42, 0.50) 50%, rgba(15, 23, 42, 0.85) 100%),
    url('/i/hero-stageplus-ca.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* WEHOOP (Pages /solutions/wehoop/ ou domaine wehoop.com) */
body[class*="wehoop"] .block-hero,
body[class*="wehoop"] .wh-hero-section,
.block-hero.wh-hero-wehoop,
.wh-hero-section.wh-hero-wehoop {
  background-image: 
    linear-gradient(180deg, rgba(15, 23, 42, 0.65) 0%, rgba(15, 23, 42, 0.50) 50%, rgba(15, 23, 42, 0.85) 100%),
    url('/i/hero-wehoop-com.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* STYLES DE CONTENU HERO */
.block-hero h1, .wh-hero-title, h1 {
  font-size: clamp(2.25rem, 6.5vw, 5.25rem) !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  line-height: 1.08 !important;
  margin-bottom: 1.5rem !important;
  text-align: center !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

.block-hero h1 span, .wh-hero-title span, h1 span { 
  color: var(--brand-accent, #00A3E0) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

.block-hero p, .wh-hero-section > p {
  font-size: clamp(0.95rem, 2.2vw, 1.15rem) !important;
  line-height: 1.6 !important;
  color: #F8FAFC !important;
  max-width: 48rem !important;
  margin: 0 auto 2.5rem auto !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7) !important;
}

.block-hero p strong, .wh-hero-section > p strong {
  color: #FFFFFF !important;
}

.block-hero .btn-primary, .wh-hero-section .btn-primary {
  background-color: var(--brand-primary, #C89D71) !important;
  color: #FFFFFF !important;
}

.block-hero .btn-dark, .wh-hero-section .btn-dark {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #FFFFFF !important;
  backdrop-filter: blur(4px) !important;
}

.hero-human-frame, .block-hero .hero-human-frame {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-inline: calc(50% - 50vw) !important;
  left: 0 !important; right: 0 !important;
  height: clamp(18rem, 32vw, 30rem) !important;
  margin-top: 3rem !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
}

.hero-human-frame img, .block-hero .hero-human-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
}

/* LOGOS CAROUSEL — AURORA DYNAMIQUE */
@keyframes auroraGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.block-logos-carousel {
  padding: 5rem 1.25rem !important;
  background-color: var(--brand-bg-light) !important;
  border-top: 1px solid var(--brand-border) !important;
  border-bottom: 1px solid var(--brand-border) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.block-logos-carousel .carousel-track-wrapper {
  width: 100% !important;
  overflow: hidden !important;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.block-logos-carousel .carousel-track {
  display: flex !important;
  gap: 1.5rem !important;
  width: max-content !important;
  padding: 0.5rem 0 !important;
  will-change: transform !important;
}

.block-logos-carousel .carousel-track.is-animating {
  animation: whInfiniteScroll 30s linear infinite !important;
}

.block-logos-carousel .carousel-track:hover {
  animation-play-state: running !important;
}

.block-logos-carousel .logo-card {
  min-width: 14rem !important;
  height: 7rem !important;
  background: #FFFFFF !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.25rem !important;
  flex-shrink: 0 !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s ease, 
              border-color 0.4s ease !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}

.block-logos-carousel .logo-card:hover {
  background: linear-gradient(
    125deg,
    #FFFFFF 0%,
    color-mix(in srgb, var(--brand-primary) 14%, #FFFFFF) 50%,
    #FFFFFF 100%
  ) !important;
  background-size: 200% 200% !important;
  animation: auroraGlow 3.5s ease infinite !important;
  
  border-color: color-mix(in srgb, var(--brand-primary) 50%, transparent) !important;
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 0 16px 32px -6px color-mix(in srgb, var(--brand-primary) 22%, transparent),
              0 4px 12px rgba(15, 23, 42, 0.04) !important;
  z-index: 10 !important;
}

.block-logos-carousel .wh-logo-img {
  max-height: 3.5rem !important;
  width: auto !important;
  object-fit: contain !important;
  filter: grayscale(100%) opacity(0.75);
  transition: filter 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.block-logos-carousel .logo-card:hover .wh-logo-img {
  filter: grayscale(0%) opacity(1) !important;
  transform: scale(1.06) !important;
}

@keyframes whInfiniteScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* GRID CARDS & SOLUTIONS */
.block-grid-cards, .wh-container {
  max-width: 75rem !important;
  width: 100% !important;
  margin: 4rem auto !important;
  padding: 0 1.25rem !important;
  box-sizing: border-box !important;
}

.block-grid-cards .cards-grid, .wh-solutions-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.75rem !important;
  align-items: stretch !important;
}

.block-grid-cards .card-item, .wh-card-interactive {
  text-decoration: none !important;
  background: #FFFFFF !important;
  border: 1px solid var(--brand-border, #E2E8F0) !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.block-grid-cards .card-item:hover, .wh-card-interactive:hover {
  transform: translateY(-0.35rem) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.08) !important;
}

.block-grid-cards .card-img-wrap, .wh-card-img-wrap {
  width: 100% !important;
  height: 13.5rem !important;
  overflow: hidden !important;
  background-color: #F1F5F9 !important;
}

.block-grid-cards .card-img-wrap img, .wh-card-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.block-grid-cards .card-content, .wh-card-content {
  padding: 1.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  flex-grow: 1 !important;
}

.block-grid-cards .card-item p, .wh-card-interactive p, .wh-card-content p {
  color: #475569 !important;
}

.block-grid-cards .card-item h3, .wh-card-interactive h3, .wh-card-content h3 {
  color: #0F172A !important;
}

/* STYLE PROPRE DES LIENS DE CARTES */
.block-grid-cards .card-link,
.wh-card-interactive .card-link,
.wh-card-content .card-link,
button.card-link,
a.card-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  margin-top: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: var(--brand-primary, #B08968) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  height: auto !important;
  min-height: unset !important;
  border-radius: 0 !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.block-grid-cards .card-link:hover,
.wh-card-interactive:hover .card-link,
button.card-link:hover,
a.card-link:hover {
  color: var(--brand-primary-hover, #967252) !important;
  background: transparent !important;
  transform: translateX(3px) !important;
}

/* REASSURANCE BOX */
.block-callout-card, .wh-reassurance-box {
  background-color: var(--brand-bg-light, #F8FAFC) !important;
  border: 1px solid var(--brand-border, #E2E8F0) !important;
  border-radius: 1.5rem !important;
  padding: 4rem 2.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 1.25rem !important;
  max-width: 68rem !important;
  margin: 5rem auto !important;
  box-sizing: border-box !important;
}

.block-callout-card h2, .wh-reassurance-title {
  text-align: center !important;
  color: #0F172A !important;
}

.block-callout-card p, .wh-reassurance-desc {
  text-align: center !important;
  color: #475569 !important;
  max-width: 44rem !important;
  margin: 0 auto !important;
}

.block-callout-card .btn-dark, 
.wh-reassurance-box .wh-btn-dark,
.wh-reassurance-box .btn-dark {
  align-self: center !important;
  margin: 1.25rem auto 0 auto !important;
}

/* BANNIÈRE CTA BLEUE */
.wh-cta-blue-banner {
  background-color: var(--brand-primary, #B08968) !important;
  color: #FFFFFF !important;
  text-align: center !important;
  padding: 4.5rem 1.25rem !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important; right: 50% !important;
  margin-left: -50vw !important; margin-right: -50vw !important;
  box-sizing: border-box !important;
}

.wh-cta-blue-banner h2,
.wh-cta-blue-banner p,
.wh-cta-blue-banner .wh-cta-desc {
  color: #FFFFFF !important;
  text-align: center !important;
}

.wh-cta-blue-banner .wh-btn-cta-white,
.wh-btn-cta-white,
button.wh-btn-cta-white {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  padding: 0 2rem !important;
  height: 3.25rem !important;
  border-radius: 3.125rem !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  margin: 1.5rem auto 0 auto !important;
  text-decoration: none !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, color 0.25s ease !important;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1) !important;
}

.wh-cta-blue-banner .wh-btn-cta-white:hover,
.wh-btn-cta-white:hover,
button.wh-btn-cta-white:hover {
  background-color: #FFFFFF !important;
  color: var(--brand-primary, #B08968) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.2) !important;
}

[data-brand="wehoop"] .wh-cta-blue-banner .wh-btn-cta-white:hover,
[data-brand="wehoop"] .wh-btn-cta-white:hover {
  color: #00A3E0 !important;
}

/* ==========================================================================
   BANNER DARK (STRUCTURE UNIFIÉE EN 3 COLONNES SUR PC)
   ========================================================================== */

.block-banner-dark, .wh-dark-section {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important; right: 50% !important;
  margin-left: -50vw !important; margin-right: -50vw !important;
  background-color: var(--brand-dark, #0F172A) !important;
  color: #FFFFFF !important;
  padding: 5rem 1.25rem !important;
  box-sizing: border-box !important;
}

.block-banner-dark .banner-container {
  max-width: 75rem !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.block-banner-dark .banner-header {
  text-align: center !important;
  max-width: 48rem !important;
  margin: 0 auto 3rem auto !important;
}

.block-banner-dark h2, .wh-dark-section h2,
.block-banner-dark h3, .wh-dark-section h3,
.block-banner-dark .card-item-dark h3, .wh-dark-card h3 {
  color: #FFFFFF !important;
}

.block-banner-dark p, .wh-dark-section p, .wh-dark-section .wh-dark-desc {
  color: #94A3B8 !important;
}

/* CORRECTIF LIENS SECTION SOMBRE */
.block-banner-dark p a,
.wh-dark-section p a,
.wh-dark-desc a {
  color: var(--brand-primary, #B08968) !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

.block-banner-dark p a:hover,
.wh-dark-section p a:hover,
.wh-dark-desc a:hover {
  color: var(--brand-primary-hover, #967252) !important;
}

/* CARTE DE BASE */
.block-banner-dark .card-item-dark, 
.wh-dark-card {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 1.25rem !important;
  padding: 2.25rem 1.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  box-sizing: border-box !important;
}

.block-banner-dark .icon-wrap svg, .wh-dark-card .wh-icon-wrap svg {
  color: var(--brand-primary, #B08968) !important;
  stroke: var(--brand-primary, #B08968) !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
}

/* --- STRUCTURE 3 COLONNES SUR PC (> 1024px) --- */
@media (min-width: 64.0625rem) {
  .block-banner-dark .cards-grid, 
  .wh-dark-grid,
  .block-banner-dark .cards-grid.wh-dark-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.75rem !important;
    margin: 2rem auto 0 auto !important;
    max-width: 75rem !important;
    width: 100% !important;
  }
}

/* --- MOBILE (< 1024px) : 1 COLONNE --- */
@media (max-width: 64rem) {
  .block-banner-dark .cards-grid,
  .wh-dark-grid,
  .block-banner-dark .cards-grid.wh-dark-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
}

/* ==========================================================================
   6. FORMULAIRES CONTACT & CARRIÈRES (DESIGN UNIFIÉ CF7 ET 2 COLONNES)
   ========================================================================== */

.block-contact {
  max-width: 75rem !important;
  width: 100% !important;
  margin: 3rem auto 5rem auto !important;
  padding: 0 1.25rem !important;
  box-sizing: border-box !important;
}

.block-contact .contact-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.15fr !important;
  gap: 3.5rem !important;
  align-items: start !important;
}

/* TYPOGRAPHIE ET ALIGNEMENT COLONNE GAUCHE CONTACT */
.contact-info .contact-title {
  font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
  line-height: 1.15 !important;
  margin: 0.5rem 0 1.5rem 0 !important;
  font-weight: 900 !important;
  color: #0F172A !important;
}

.contact-info .contact-title span {
  color: var(--brand-primary, #B08968) !important;
}

.contact-info .contact-desc {
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  margin-bottom: 2.5rem !important;
}

.contact-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.75rem !important;
  margin-bottom: 2.5rem !important;
}

.contact-detail-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 1rem !important;
}

.contact-icon {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  border-radius: 0.625rem !important;
  background-color: color-mix(in srgb, var(--brand-primary, #B08968) 10%, #FFFFFF) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 0.2rem !important;
}

.contact-icon svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  stroke: var(--brand-primary, #B08968) !important;
}

.contact-detail-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
}

.contact-detail-text strong {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

.contact-detail-text span {
  font-size: 0.95rem !important;
  color: #475569 !important;
  line-height: 1.4 !important;
}

/* CARTE FORMULAIRE CF7 (CONTACT & CARRIÈRES) */
.block-contact .contact-form-card,
.wh-careers-form-card {
  background-color: #FFFFFF !important;
  border: 1px solid var(--brand-border, #E2E8F0) !important;
  border-radius: 1.25rem !important;
  padding: 2.5rem 2rem !important;
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.06) !important;
  box-sizing: border-box !important;
}

/* ÉLARGISSEMENT SPÉCIFIQUE FORMULAIRE CARRIÈRES */
.wh-careers-form-card {
  max-width: 50rem !important;
  padding: 3rem 2.5rem !important;
  margin: 0 auto !important;
}

/* NEUTRALISATION DES PARAGRAPHES AUTOMATIQUES CF7 */
.contact-form-card .wpcf7-form p,
.wh-careers-form-card .wpcf7-form p,
.contact-form-card .wpcf7-form-control-wrap,
.wh-careers-form-card .wpcf7-form-control-wrap {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
}

/* STRUCTURE EN GRILLE 2 COLONNES */
.contact-form-card .form-grid,
.wh-careers-form-card .form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  .contact-form-card .form-grid,
  .wh-careers-form-card .form-grid {
    grid-template-columns: 1fr !important;
  }
}

.contact-form-card .form-group,
.wh-careers-form-card .form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  width: 100% !important;
}

.contact-form-card .form-group.full-width,
.wh-careers-form-card .form-group.full-width {
  grid-column: 1 / -1 !important;
}

.contact-form-card label,
.wh-careers-form-card label,
.contact-form-card .kiwi-form-label {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  display: block !important;
}

/* STYLE DES CHAMPS DE SAISIE */
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card input[type="tel"],
.contact-form-card select,
.contact-form-card textarea,
.wh-careers-form-card input[type="text"],
.wh-careers-form-card input[type="email"],
.wh-careers-form-card input[type="tel"],
.wh-careers-form-card select,
.wh-careers-form-card textarea,
.kiwi-form-input,
.kiwi-form-textarea {
  width: 100% !important;
  height: 2.875rem !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 0.625rem !important;
  padding: 0 1rem !important;
  color: #0F172A !important;
  font-size: 0.875rem !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.contact-form-card textarea,
.wh-careers-form-card textarea,
.kiwi-form-textarea {
  height: 8rem !important;
  padding: 0.75rem 1rem !important;
  resize: vertical !important;
}

.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus,
.wh-careers-form-card input:focus,
.wh-careers-form-card select:focus,
.wh-careers-form-card textarea:focus {
  outline: none !important;
  border-color: var(--brand-primary, #B08968) !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(176, 137, 104, 0.15) !important;
}

/* FLÈCHE DES MENUS DÉROULANTS */
.contact-form-card .wpcf7-select,
.wh-careers-form-card .wpcf7-select,
select.wpcf7-form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 2.875rem !important;
  padding: 0 2.5rem 0 1rem !important;
  font-family: inherit !important;
  font-size: 0.875rem !important;
  color: #0F172A !important;
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 0.625rem !important;
  box-sizing: border-box !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 1rem !important;
  cursor: pointer !important;
}

/* CHAMP FILE (CV) FIXE — SANS CHEVAUCHEMENT & BOUTON COMPACT */
.wh-careers-form-card .wpcf7-form-control-wrap[data-name="candidate-cv"] {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.wh-careers-form-card input[type="file"] {
  width: 100% !important;
  height: auto !important;
  min-height: 3.25rem !important;
  padding: 0.4rem 0.75rem !important;
  background-color: #F8FAFC !important;
  border: 1px dashed #CBD5E1 !important;
  border-radius: 0.625rem !important;
  color: #475569 !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

.wh-careers-form-card input[type="file"]:hover {
  border-color: var(--brand-primary, #B08968) !important;
  background-color: color-mix(in srgb, var(--brand-primary, #B08968) 4%, #F8FAFC) !important;
}

/* Neutralisation du pseudo ::before */
.wh-careers-form-card input[type="file"]::before {
  display: none !important;
  content: none !important;
}

/* Bouton natif Webkit compact en Bronze Kiwi */
.wh-careers-form-card input[type="file"]::-webkit-file-upload-button {
  display: inline-block !important;
  appearance: button !important;
  -webkit-appearance: button !important;
  background-color: var(--brand-primary, #B08968) !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.375rem !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin-right: 0.875rem !important;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  flex-shrink: 0 !important;
  transition: background-color 0.2s ease !important;
}

.wh-careers-form-card input[type="file"]::-webkit-file-upload-button:hover {
  background-color: var(--brand-primary-hover, #967252) !important;
}

/* Erreur de validation CF7 */
.wh-careers-form-card .wpcf7-not-valid-tip {
  color: #ef4444 !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  margin-top: 0.375rem !important;
  display: block !important;
}

/* CHECKBOX DANS UNE BOÎTE / CONTENEUR CARTE */
.wpcf7-form .wpcf7-list-item,
.wpcf7-checkbox .wpcf7-list-item,
.contact-form-card .wpcf7-list-item,
.wh-careers-form-card .wpcf7-list-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.875rem !important;
  width: 100% !important;
  margin: 1.25rem 0 !important;
  padding: 1rem 1.125rem !important;
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 0.75rem !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.wpcf7-form .wpcf7-list-item:hover,
.contact-form-card .wpcf7-list-item:hover,
.wh-careers-form-card .wpcf7-list-item:hover {
  border-color: var(--brand-primary, #B08968) !important;
  background-color: color-mix(in srgb, var(--brand-primary, #B08968) 4%, #F8FAFC) !important;
}

.wpcf7-form .wpcf7-list-item:has(input:checked),
.contact-form-card .wpcf7-list-item:has(input:checked),
.wh-careers-form-card .wpcf7-list-item:has(input:checked) {
  border-color: var(--brand-primary, #B08968) !important;
  background-color: color-mix(in srgb, var(--brand-primary, #B08968) 6%, #FFFFFF) !important;
}

.wpcf7-form .wpcf7-list-item-label,
.contact-form-card .wpcf7-list-item-label,
.wh-careers-form-card .wpcf7-list-item-label {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  line-height: 1.45 !important;
  cursor: pointer !important;
  display: inline-block !important;
  flex: 1 !important;
}

.wpcf7-form input[type="checkbox"],
.contact-form-card input[type="checkbox"],
.wh-careers-form-card input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
  border: 2px solid #CBD5E1 !important;
  border-radius: 0.375rem !important;
  background-color: #FFFFFF !important;
  margin: 0.1rem 0 0 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  display: inline-grid !important;
  place-content: center !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  flex-shrink: 0 !important;
}

.wpcf7-form input[type="checkbox"]:checked,
.contact-form-card input[type="checkbox"]:checked,
.wh-careers-form-card input[type="checkbox"]:checked {
  background-color: var(--brand-primary, #B08968) !important;
  border-color: var(--brand-primary, #B08968) !important;
}

.wpcf7-form input[type="checkbox"]:checked::before,
.contact-form-card input[type="checkbox"]:checked::before,
.wh-careers-form-card input[type="checkbox"]:checked::before {
  content: "" !important;
  width: 0.65rem !important;
  height: 0.65rem !important;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
  background-color: #FFFFFF !important;
  transform: scale(1) !important;
}

/* BOUTONS DE SOUMISSION BRONZE KIWI UNIFIÉS */
.contact-form-card input.wpcf7-submit,
.wh-careers-form-card input.wpcf7-submit,
.block-contact .contact-form-card .wpcf7-submit,
input.wpcf7-form-control.wpcf7-submit,
.kiwi-btn-submit {
  width: 100% !important;
  height: 3.25rem !important;
  padding: 0 1.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--brand-primary, #B08968) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  border-radius: 3.125rem !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.contact-form-card input.wpcf7-submit:hover,
.wh-careers-form-card input.wpcf7-submit:hover,
.block-contact .contact-form-card .wpcf7-submit:hover,
input.wpcf7-form-control.wpcf7-submit:hover,
.kiwi-btn-submit:hover {
  background-color: var(--brand-primary-hover, #967252) !important;
  transform: translateY(-1px) !important;
}

/* MODALE INTERACTIVE iFORM */
.block-iform { width: 100% !important; }

.wh-modal-overlay.block-iform {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100vw !important; height: 100vh !important;
  background-color: rgba(15, 23, 42, 0) !important;
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(0px) !important;
  z-index: 2147483640 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.25rem !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s !important;
  box-sizing: border-box !important;
}

.wh-modal-overlay.block-iform.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background-color: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition-delay: 0s !important;
}

.wh-modal-overlay.block-iform .modal-card {
  position: relative !important;
  background: #FFFFFF !important;
  border-radius: 1.25rem !important;
  padding: 2.5rem 2rem !important;
  width: 100% !important;
  max-width: 32rem !important;
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.25) !important;
  box-sizing: border-box !important;
  transform: scale(0.92) translateY(16px) !important;
  opacity: 0 !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.wh-modal-overlay.block-iform.is-open .modal-card { 
  transform: scale(1) translateY(0) !important; 
  opacity: 1 !important; 
}

.wh-modal-overlay.block-iform .step-badge {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  color: var(--brand-primary, #B08968) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: inline-block !important;
  margin-bottom: 0.25rem !important;
}

.wh-modal-overlay.block-iform .step-title {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0.25rem 0 1.25rem 0 !important;
  line-height: 1.25 !important;
}

.wh-modal-overlay.block-iform .options-grid { 
  display: flex !important; 
  flex-direction: column !important; 
  gap: 0.75rem !important; 
  width: 100% !important; 
}

.wh-modal-overlay.block-iform .option-btn {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  background: var(--brand-bg-light, #F8FAFC) !important;
  border: 1px solid var(--brand-border, #E2E8F0) !important;
  border-radius: 0.75rem !important;
  padding: 0.875rem 1.125rem !important;
  text-align: left !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.wh-modal-overlay.block-iform .option-btn:hover {
  border-color: var(--brand-primary, #B08968) !important;
  background-color: color-mix(in srgb, var(--brand-primary, #B08968) 8%, #FFFFFF) !important;
  transform: translateY(-2px) !important;
}

.wh-modal-overlay.block-iform .option-btn strong { 
  color: #0F172A !important; 
  font-size: 0.95rem !important; 
  font-weight: 700 !important; 
  display: block !important; 
  margin-bottom: 0.15rem !important; 
}

.wh-modal-overlay.block-iform .option-btn span { 
  color: #64748B !important; 
  font-size: 0.8125rem !important; 
  display: block !important; 
  line-height: 1.3 !important; 
}

/* ==========================================================================
   7. NAVIGATION HEADER & DROPDOWNS DESKTOP (UNIFIÉ MULTI-BRAND & WCAG)
   ========================================================================== */

header.wh-header-root, header.et-l--header, .et_pb_section_0_tb_header {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important; height: 4.0625rem !important;
  background-color: var(--brand-dark, #0B132B) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.4) !important;
  z-index: 2147483647 !important;
}

.wh-header-inner {
  max-width: 75rem !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 1.25rem !important;
  height: 4.0625rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  color: #FFFFFF !important;
}

/* LOGO HEADER */
.wh-header-logo {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.wh-header-logo img,
.wh-header-logo-img {
  height: 2.25rem !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* CONTENEUR NAVIGATION DESKTOP */
.wh-nav-desktop-wrap {
  display: flex !important;
  align-items: center !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.wh-nav-desktop-wrap ul, ul.wh-nav-desktop {
  display: flex !important;
  align-items: center !important;
  gap: 2em !important;
  list-style: none !important;
  margin: 0 !important; padding: 0 !important;
}

.wh-nav-desktop-wrap ul > li { 
  position: relative !important; 
  list-style: none !important; 
  padding: 0 !important; 
  margin: 0 !important; 
}

.wh-nav-desktop-wrap ul > li > a {
  color: #F8FAFC !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  text-decoration: none !important;
  padding: 1.375em 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  transition: color 0.2s ease !important;
}

.wh-nav-desktop-wrap ul > li:hover > a,
.wh-nav-desktop-wrap ul > li.current-menu-item > a { 
  color: var(--brand-primary, #B08968) !important;
}

.wh-chevron-down { 
  display: inline-block !important; 
  color: #94A3B8 !important; 
  transition: transform 0.25s ease !important; 
}

.wh-nav-desktop-wrap li:hover > a .wh-chevron-down { 
  transform: rotate(180deg) !important; 
  color: var(--brand-primary, #B08968) !important; 
}

/* DROPDOWN MEGA MENU DESKTOP */
.wh-nav-desktop-wrap .wh-dropdown {
  display: none !important;
  position: fixed !important;
  top: 4.0625rem !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  background-color: var(--brand-dark, #0B132B) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0.875rem !important;
  padding: 1.5rem !important;
  box-shadow: 0 1.25em 2.5em rgba(0, 0, 0, 0.75) !important;
  z-index: 2147483645 !important;
  width: 90vw !important;
  max-width: 58rem !important;
  margin: 0 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
  box-sizing: border-box !important;
}

.wh-nav-desktop-wrap .wh-dropdown.wh-mega-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.wh-nav-desktop-wrap .wh-dropdown:not(.wh-mega-grid-3) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
}

.wh-nav-desktop-wrap li:hover > .wh-dropdown {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* CARTE DU MEGA MENU (.wh-mega-card) */
.wh-nav-desktop-wrap .wh-mega-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 1.25rem !important;
  border-radius: 0.75rem !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  text-decoration: none !important;
  color: #FFFFFF !important;
  text-align: left !important;
  transition: all 0.2s ease !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.wh-nav-desktop-wrap .wh-mega-card:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--brand-primary, #B08968) !important;
  transform: translateY(-2px) !important;
}

.wh-nav-desktop-wrap .wh-card-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  width: 100% !important;
  margin-bottom: 0.5rem !important;
}

.wh-nav-desktop-wrap .wh-card-title {
  color: #FFFFFF !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.wh-nav-desktop-wrap .wh-card-pills-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
}

.wh-nav-desktop-wrap .card-pill {
  color: var(--brand-primary, #B08968) !important;
  background-color: color-mix(in srgb, var(--brand-primary, #B08968) 15%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #B08968) 35%, transparent) !important;
  font-size: 0.6875rem !important;
  padding: 0.2em 0.6em !important;
  border-radius: 2rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.wh-nav-desktop-wrap .wh-card-desc,
.wh-nav-desktop-wrap p {
  color: #CBD5E1 !important;
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* GROUPE DE BOUTONS À DROITE DU HEADER */
.wh-header-right-group {
  display: flex !important;
  align-items: center !important;
  gap: 0.875rem !important;
  margin-left: auto !important;
  position: relative !important;
  z-index: 2147483647 !important;
}

.wh-header-right-group .btn-primary,
.wh-header-right-group .btn-brand {
  margin: 0 !important;
}

/* BOUTON BURGER & BOUTON CROIX "X" DE FERMETURE */
.wh-burger-btn, #whBurgerBtn {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  width: 2.5rem !important; height: 2.5rem !important;
  padding: 0 !important;
  z-index: 2147483647 !important;
  margin-left: 0.5rem !important;
  flex-shrink: 0 !important;
  position: relative !important;
  top: auto !important; right: auto !important; left: auto !important;
}

.wh-burger-btn span {
  width: 1.5rem !important; height: 0.125rem !important;
  background-color: #FFFFFF !important;
  border-radius: 2px !important;
  transform-origin: center !important;
  display: block !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease, opacity 0.3s ease !important;
}

.wh-burger-btn.is-active span:nth-child(1), body.wh-has-modal-open .wh-burger-btn span:nth-child(1) { 
  transform: translateY(0.475rem) rotate(45deg) !important; 
  background-color: var(--brand-primary, #B08968) !important; 
}
.wh-burger-btn.is-active span:nth-child(2), body.wh-has-modal-open .wh-burger-btn span:nth-child(2) { 
  opacity: 0 !important; 
  transform: scaleX(0) !important; 
}
.wh-burger-btn.is-active span:nth-child(3), body.wh-has-modal-open .wh-burger-btn span:nth-child(3) { 
  transform: translateY(-0.475rem) rotate(-45deg) !important; 
  background-color: var(--brand-primary, #B08968) !important; 
}

/* ==========================================================================
   8. TIROIR MENU MOBILE & BREAKPOINTS GENERALS + GESTION CROIX "X" DESKTOP
   ========================================================================== */

.wh-mobile-menu {
  position: fixed !important;
  top: 4.0625rem !important;
  right: -100% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: calc(100vh - 4.0625rem) !important;
  background-color: var(--brand-dark, #0B132B) !important;
  z-index: 2147483646 !important;
  padding: 1.5rem 1.25rem 3rem 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

.wh-mobile-menu.is-active {
  right: 0 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.wh-mobile-nav-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.wh-mobile-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.875rem !important;
  width: 100% !important;
}

.wh-mobile-menu .wh-nav-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  color: var(--brand-primary, #B08968) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  display: block !important;
  margin: 0 !important;
}

.wh-mobile-menu .wh-mobile-compact-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

.wh-mobile-menu .wh-mobile-compact-links a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  color: #FFFFFF !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  text-decoration: none !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.5rem !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.wh-mobile-menu .wh-mobile-compact-links a:hover,
.wh-mobile-menu .wh-mobile-compact-links a:active {
  background-color: rgba(176, 137, 104, 0.12) !important;
  border-color: var(--brand-primary, #B08968) !important;
  color: #FFFFFF !important;
}

.wh-mobile-menu .wh-mobile-compact-links .card-pill {
  margin-left: 0.5rem !important;
  font-size: 0.7rem !important;
  padding: 0.2em 0.6em !important;
  flex-shrink: 0 !important;
}

/* AFFICHAGE DESKTOP (> 1024px) */
@media (min-width: 64.0625rem) {
  .wh-nav-desktop-wrap {
    display: flex !important;
  }

  /* Par défaut sur PC : le bouton burger est caché */
  .wh-burger-btn, 
  #whBurgerBtn, 
  header.wh-header-root #whBurgerBtn {
    display: none !important;
  }

  /* QUAND UNE MODALE EST OUVERTE SUR PC : Le bouton devient la croix "X" de fermeture */
  body.wh-has-modal-open .wh-burger-btn,
  body.wh-has-modal-open #whBurgerBtn,
  #whBurgerBtn.is-active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2147483647 !important;
    cursor: pointer !important;
  }

  #whMobileMenu, .wh-mobile-menu {
    display: none !important;
    visibility: hidden !important;
  }
}

/* AFFICHAGE MOBILE & TABLETTE (< 1024px) */
@media (max-width: 64rem) {
  .wh-nav-desktop-wrap {
    display: none !important;
  }

  .wh-burger-btn, #whBurgerBtn {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .wh-header-right-group .btn-primary {
    height: 2.25rem !important;
    padding: 0 0.875em !important;
    font-size: 0.75rem !important;
    border-radius: 2rem !important;
    white-space: nowrap !important;
  }

  .block-grid-cards .cards-grid, 
  .block-contact .contact-grid, 
  .wh-solutions-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .block-banner-dark .cards-grid,
  .wh-dark-grid,
  .block-banner-dark .cards-grid.wh-dark-grid,
  .wh-dark-section .cards-grid,
  .wh-dark-section .cards-grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 54.25rem) {
  .wh-news-grid { grid-template-columns: 1fr; }
  .wh-featured-card, .wh-news-card { padding: 24px; }
}

/* ==========================================================================
   9. CAL.COM INTEGRATION & MASKING
   ========================================================================== */

cal-modal-box, .cal-modal-box, [data-cal-namespace] { 
  z-index: 2147483640 !important; 
  position: fixed !important;
}

cal-modal-box button,
cal-modal-box .close,
cal-modal-box [class*="close"],
cal-modal-box [aria-label*="Close"],
cal-modal-box [aria-label*="Fermer"],
.cal-modal-box button,
.cal-modal-box .close,
.cal-element-embed-light button,
.cal-element-embed-light .close,
.my-backdrop button.close,
div.header > button.close {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  clip: rect(0 0 0 0) !important;
}

body #whBurgerBtn,
body header #whBurgerBtn {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   10. FOOTER SOMBRE UNIFIÉ FULL-BLEED (STRUCTURE PC & MOBILE DÉFINITIVE)
   ========================================================================== */

#main-content,
.entry-content,
#page-container {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

html body #page-container #et-main-area footer .et_builder_inner_content .et_pb_section_0_tb_footer,
html body #page-container footer.et-l--footer .et_pb_section_0_tb_footer,
body .et_pb_section_0_tb_footer.et_pb_section,
div.et_pb_section_0_tb_footer {
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
}

.et_pb_row_0_tb_footer,
.et_pb_column_0_tb_footer,
.et-l--footer {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
}

footer.kiwi-footer-wrapper, 
footer.block-footer {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background-color: var(--brand-dark, #0F172A) !important;
  color: #94A3B8 !important;
  padding: 3.5rem 1.25rem 2rem 1.25rem !important;
  box-sizing: border-box !important;
}

.kiwi-footer-container { 
  max-width: 77.5rem !important; 
  margin: 0 auto !important; 
  width: 100% !important;
}

@media (min-width: 64.0625rem) {
  html body #page-container .kiwi-footer-cols-wrapper,
  html body #page-container .footer-grid.kiwi-footer-cols-wrapper,
  html body #page-container div.kiwi-footer-cols-wrapper[style] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2rem !important;
    margin-bottom: 2.5rem !important;
    align-items: start !important;
    width: 100% !important;
  }

  html body #page-container .kiwi-footer-brand-section,
  html body #page-container div.kiwi-footer-brand-section[style] {
    grid-column: span 1 !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }

  html body #page-container .kiwi-footer-col,
  html body #page-container div.kiwi-footer-col[style] {
    grid-column: span 1 !important;
  }
}

@media (max-width: 64rem) {
  html body #page-container .kiwi-footer-cols-wrapper,
  html body #page-container .footer-grid.kiwi-footer-cols-wrapper,
  html body #page-container div.kiwi-footer-cols-wrapper[style] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.5rem 0.75rem !important;
    width: 100% !important;
    margin-bottom: 2rem !important;
  }

  html body #page-container .kiwi-footer-brand-section,
  html body #page-container div.kiwi-footer-brand-section[style] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.75rem !important;
  }

  html body #page-container .kiwi-footer-col,
  html body #page-container div.kiwi-footer-col[style] {
    grid-column: span 1 !important;
    width: 100% !important;
  }

  footer.kiwi-footer-wrapper, 
  footer.block-footer, 
  .et_pb_section_0_tb_footer {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .kiwi-footer-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
}

.kiwi-footer-col h4 {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.6875rem !important;
  color: var(--brand-primary, #B08968) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
  margin: 0 0 1rem 0 !important;
}

.kiwi-footer-links { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.kiwi-footer-links li { margin-bottom: 0.625rem !important; }
.kiwi-footer-links a { 
  color: #94A3B8 !important; 
  font-size: 0.875rem !important; 
  text-decoration: none !important; 
  transition: color 0.2s ease !important;
}
.kiwi-footer-links a:hover { 
  color: #FFFFFF !important; 
  text-decoration: none !important; 
}

.kiwi-footer-brand-desc, .kiwi-footer-bottom { color: #64748B !important; }

.kiwi-footer-bottom {
  padding-top: 1.5rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.8125rem !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}

.kiwi-footer-legal-links { 
  display: flex !important; 
  align-items: center !important; 
  gap: 1.5rem !important; 
}

.kiwi-footer-legal-links a { 
  color: #94A3B8 !important; 
  text-decoration: none !important; 
  font-weight: 500 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: color 0.2s ease !important;
}

.kiwi-footer-legal-links a:hover { 
  color: #FFFFFF !important; 
  text-decoration: none !important; 
  background: transparent !important;
}

/* ==========================================================================
   11. PAGES LÉGALES & LIENS (SÉPARÉS STRICTEMENT DES CARTES DE CONTENU)
   ========================================================================== */

.legal-content-container { max-width: 54rem !important; margin: 0 auto 5rem auto !important; padding: 0 1.25rem !important; color: #1E293B !important; line-height: 1.7 !important; font-size: 1rem !important; }
.legal-content-container article { margin-bottom: 2.5rem; }
.legal-content-container h2 { font-size: 1.5rem !important; font-weight: 800 !important; color: #0F172A !important; margin-bottom: 0.75rem !important; border-bottom: 2px solid var(--brand-border) !important; padding-bottom: 0.5rem !important; }
.legal-content-container h3 { font-size: 1.15rem !important; font-weight: 700 !important; color: #0F172A !important; margin: 1.25rem 0 0.5rem 0 !important; }
.legal-content-container p, .legal-content-container ul { color: #475569 !important; margin-bottom: 1rem !important; }
.legal-content-container ul { list-style-type: disc !important; padding-left: 1.5rem !important; }
.legal-content-container ul li { margin-bottom: 0.5rem !important; }

.legal-content-container a,
.legal-contact-card a,
.wh-card-link-cyan {
  color: var(--brand-primary, #B08968) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 0.15em 0.4em !important;
  margin: -0.15em -0.4em !important;
  border-radius: 0.375rem !important;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease !important;
}

.legal-content-container a:hover,
.legal-contact-card a:hover,
.wh-card-link-cyan:hover {
  background-color: rgba(176, 137, 104, 0.12) !important;
  color: var(--brand-primary-hover, #967252) !important;
  text-decoration: none !important;
}

[data-brand="wehoop"] .legal-content-container a:hover,
[data-brand="wehoop"] .legal-contact-card a:hover,
[data-brand="wehoop"] .wh-card-link-cyan:hover {
  background-color: rgba(0, 163, 224, 0.12) !important;
}

.legal-alert-box { background: rgba(176, 137, 104, 0.08) !important; border-left: 4px solid var(--brand-primary) !important; padding: 1rem 1.25rem !important; border-radius: 4px !important; margin-bottom: 1.5rem !important; font-size: 0.938rem !important; color: #0F172A !important; }
.legal-contact-card { background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; border-radius: 12px !important; padding: 2rem !important; margin-top: 1rem !important; }
.legal-contact-card ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }

.legal-table-wrap { overflow-x: auto !important; border: 1px solid #E2E8F0 !important; border-radius: 8px !important; margin-bottom: 1.5rem !important; }
.legal-table { width: 100% !important; border-collapse: collapse !important; text-align: left !important; font-size: 0.938rem !important; }
.legal-table thead, .legal-table thead tr { background-color: #0F172A !important; }
.legal-table thead th { background-color: #0F172A !important; color: #FFFFFF !important; font-weight: 700 !important; padding: 1rem !important; border-bottom: 1px solid #1E293B !important; }
.legal-table td { padding: 1rem !important; border-bottom: 1px solid #E2E8F0 !important; color: #475569 !important; }
.legal-table tr:nth-child(even) td { background-color: #F8FAFC !important; }
.legal-table tr:nth-child(odd) td { background-color: #FFFFFF !important; }
.legal-table td strong { color: #0F172A !important; }

/* ==========================================================================
   12. PAGE NOUVEAUTÉS & CHANGELOG (DE-RESTRICTION DIVI & CENTRAGE)
   ========================================================================== */

.page-id-4067 #main-content .container,
.page-id-4067 #main-content .et_pb_row,
.page-id-4067 #main-content .et_pb_column {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}

.wh-news-container, .wh-changelog-container {
  max-width: 75rem !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 2.5rem 1.25rem 5rem 1.25rem !important;
  box-sizing: border-box !important;
}

.wh-news-header, .wh-changelog-header {
  text-align: center !important;
  max-width: 48rem !important;
  margin: 0 auto 2.5rem auto !important;
}

.wh-news-subtitle {
  display: inline-block !important;
  color: var(--brand-primary, #00A3E0) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 0.25rem !important;
}

.wh-news-main-title {
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0.75rem 0 !important;
  line-height: 1.2 !important;
}

.wh-news-intro {
  color: #334155 !important;
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  margin-bottom: 0.75rem !important;
}

.wh-news-header-link {
  color: var(--brand-primary, #00A3E0) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  transition: transform 0.2s ease !important;
}

.wh-news-header-link:hover {
  transform: translateX(3px) !important;
}

.wh-news-filter-bar {
  display: flex !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  margin-bottom: 2.5rem !important;
  flex-wrap: wrap !important;
}

.wh-filter-btn {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: 2rem !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.wh-filter-btn:hover {
  border-color: #00A3E0 !important;
  color: #00A3E0 !important;
}

.wh-filter-btn.is-active {
  background-color: #0B132B !important;
  border-color: #0B132B !important;
  color: #FFFFFF !important;
}

.wh-featured-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  background: linear-gradient(135deg, #0B1120 0%, #1A2332 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 1rem !important;
  padding: 2.5rem !important;
  margin-bottom: 2.5rem !important;
  text-decoration: none !important;
  box-shadow: 0 1.25rem 2.5rem rgba(11, 17, 32, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.wh-featured-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--brand-primary, #00A3E0) !important;
  box-shadow: 0 1.5rem 3rem rgba(0, 163, 224, 0.2) !important;
}

.wh-featured-meta {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.wh-featured-date {
  color: #94A3B8 !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  margin-left: auto !important;
}

.wh-featured-title {
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.25 !important;
}

.wh-featured-desc {
  color: #CBD5E1 !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  max-width: 53rem !important;
}

.wh-tag-group {
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
}

.wh-news-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.875rem !important;
  padding: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 1.25rem !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
}

.wh-news-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--brand-primary, #00A3E0) !important;
  box-shadow: 0 15px 35px -5px rgba(0, 163, 224, 0.2) !important;
}

.wh-timeline {
  position: relative !important;
  padding-left: 2rem !important;
  margin-top: 2rem !important;
  border-left: 2px solid #E2E8F0 !important;
}

.wh-release-item {
  position: relative !important;
  margin-bottom: 2.5rem !important;
}

.wh-release-dot {
  position: absolute !important;
  left: calc(-2rem - 5px) !important;
  top: 1.5rem !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: var(--brand-primary, #00A3E0) !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.2) !important;
}

.wh-release-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 1rem !important;
  padding: 1.75rem !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

.wh-release-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid #F1F5F9 !important;
  padding-bottom: 1rem !important;
  margin-bottom: 0.5rem !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.wh-version-tag {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: 0.02em !important;
}

.wh-release-date {
  font-size: 0.85rem !important;
  color: #64748B !important;
  font-weight: 600 !important;
}

.wh-change-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.wh-category-label {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  padding: 0.2em 0.65em !important;
  border-radius: 2rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  width: max-content !important;
}

.wh-cat-feature {
  background-color: rgba(0, 163, 224, 0.1) !important;
  border: 1px solid rgba(0, 163, 224, 0.25) !important;
  color: #00A3E0 !important;
}

.wh-cat-enhancement {
  background-color: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  color: #059669 !important;
}

.wh-cat-fix {
  background-color: rgba(100, 116, 139, 0.1) !important;
  border: 1px solid rgba(100, 116, 139, 0.25) !important;
  color: #475569 !important;
}

.wh-change-list {
  margin: 0 !important;
  padding-left: 1.25rem !important;
  list-style-type: disc !important;
  color: #334155 !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
}

.wh-change-list li {
  margin-bottom: 0.35rem !important;
}

.wh-change-list li:last-child {
  margin-bottom: 0 !important;
}

@media (min-width: 64.0625rem) {
  .wh-news-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.75rem !important;
    width: 100% !important;
  }
}

@media (max-width: 64rem) {
  .wh-news-container, .wh-changelog-container {
    padding: 1.5rem 1rem 3rem 1rem !important;
  }

  .wh-news-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    width: 100% !important;
  }

  .wh-featured-card {
    padding: 1.5rem !important;
  }

  .wh-featured-title {
    font-size: 1.35rem !important;
  }

  .wh-featured-desc {
    font-size: 0.95rem !important;
  }
}

/* ==========================================================================
   13. FEUILLE DE STYLE PRINT UNIFIÉE — CORRECTION LETTER DIVI & BRAND
   ========================================================================= */

.print-header-url,
.print-footer-title {
  display: none !important;
}

@media print {
  @page {
    size: letter portrait;
    margin: 0.75in !important;

    @bottom-right {
      content: "Page " counter(page) " sur " counter(pages);
      font-family: inherit;
      font-size: 8pt;
      color: var(--brand-dark-light, #1E293B);
    }
  }

  html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
  }

  #page-container, #et-boc, #main-content {
    width: 85% !important;
    max-width: 85% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .entry-content,
  .et_pb_section, .et_pb_row, .et_pb_row_fullwidth, .et_pb_column, .et_pb_module,
  .wh-cta-blue-banner, .block-banner-dark, .wh-dark-section,
  .block-grid-cards, .wh-container, main, article, section, div,
  footer.kiwi-footer-wrapper, footer.block-footer, .et_pb_section_0_tb_footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: auto !important;
    right: auto !important;
    position: static !important;
    transform: none !important;
    float: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  *, *::before, *::after {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cards-grid, .wh-solutions-grid, .wh-dark-grid, .contact-grid, .grid-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1rem 0 !important;
    padding: 0 !important;
  }

  .card-item, .wh-card-interactive, .card-item-dark, .wh-dark-card,
  .block-callout-card, .wh-reassurance-box, .contact-form-card,
  .wh-release-card, .callout-box, .box, .card, .grid-cell, td, th {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1.25rem 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--brand-border, #E2E8F0) !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .print-header-url {
    display: block !important;
    position: fixed !important;
    top: -0.5in !important;
    left: 0 !important;
    font-family: inherit !important;
    font-size: 8pt !important;
    color: var(--brand-dark-light, #1E293B) !important;
    z-index: 9999 !important;
  }

  .print-footer-title {
    display: block !important;
    position: fixed !important;
    bottom: -0.5in !important;
    left: 0 !important;
    font-family: inherit !important;
    font-size: 8pt !important;
    color: var(--brand-dark-light, #1E293B) !important;
    z-index: 9999 !important;
  }

  body, p, li, span, a, td, th, div, label,
  .block-banner-dark p, .wh-dark-section p, .wh-dark-desc,
  .block-grid-cards .card-item p, .wh-card-interactive p {
    color: var(--brand-dark, #0F172A) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    font-size: 10pt !important;
    line-height: 1.5 !important;
  }

  h1, h2, h3, h4, h5, h6,
  .brand-accent, .block-tag, .wh-tag-mono, .card-num,
  .block-hero h1 span, .wh-hero-title span,
  .wh-section-title-light, .wh-section-title-dark {
    color: var(--brand-primary, #B08968) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    page-break-after: avoid !important;
  }

  img, svg, video, canvas, iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  header.wh-header-root, header.et-l--header, .et_pb_section_0_tb_header,
  footer, .wh-mobile-menu, #whBurgerBtn, .wh-burger-btn,
  .no-print, .btn, .button, button, .wpcf7-submit,
  .block-logos-carousel, .hero-human-frame, cal-modal-box,
  .otgs-development-site-front-end, .wpml-ls-statics-footer,
  #wpadminbar, #cmplz-cookiebanner-container, #cmplz-manage-consent {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
  }
}

/* ==========================================================================
   14. COMPOSANT ACCORDÉON VERTICAL SOLUTIONS
   ========================================================================== */

.wh-solutions-accordion-section {
  padding: 5rem 1.25rem !important;
  background-color: var(--brand-bg-light, #F8FAFC) !important;
  border-top: 1px solid var(--brand-border, #E2E8F0) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.wh-accordion-header {
  max-width: 40rem !important;
  margin-bottom: 3.5rem !important;
}

.wh-accordion-grid-desktop {
  display: flex !important;
  gap: 1rem !important;
  height: 33.75rem !important;
  width: 100% !important;
}

.wh-accordion-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 1.25rem !important;
  background-color: #0F172A !important;
  flex: 1 1 0% !important;
  text-decoration: none !important;
  transition: flex 700ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.wh-accordion-grid-desktop:hover .wh-accordion-card {
  flex: 1 1 0% !important;
}

.wh-accordion-grid-desktop .wh-accordion-card:hover {
  flex: 2.8 1 0% !important;
}

.wh-accordion-grid-desktop:not(:hover) .wh-accordion-card.is-expanded {
  flex: 2.8 1 0% !important;
}

.wh-accordion-card .wh-accordion-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.wh-accordion-card:hover .wh-accordion-bg {
  transform: scale(1.05) !important;
}

.wh-accordion-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(4, 18, 27, 0.95) 0%, rgba(4, 18, 27, 0.5) 50%, rgba(4, 18, 27, 0.1) 100%) !important;
  pointer-events: none !important;
}

.wh-accordion-content {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  padding: 2rem !important;
  z-index: 2 !important;
}

.wh-accordion-sub {
  font-size: 0.8125rem !important;
  letter-spacing: 0.02em !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 !important;
}

.wh-accordion-title {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #FFFFFF !important;
  margin: 0.35rem 0 0 0 !important;
}

.wh-accordion-body {
  max-height: 0 !important;
  opacity: 0 !important;
  transition: max-height 500ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms ease !important;
  overflow: hidden !important;
}

.wh-accordion-grid-desktop:not(:hover) .wh-accordion-card.is-expanded .wh-accordion-body,
.wh-accordion-grid-desktop .wh-accordion-card:hover .wh-accordion-body {
  max-height: 12rem !important;
  opacity: 1 !important;
}

.wh-accordion-desc {
  margin-top: 1rem !important;
  max-width: 44ch !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.wh-accordion-link {
  margin-top: 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.90625rem !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
}

.wh-accordion-grid-mobile {
  display: none !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  margin-top: 2rem !important;
}

.wh-mobile-solution-card {
  position: relative !important;
  display: block !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  border-radius: 1rem !important;
  background-color: #0F172A !important;
  text-decoration: none !important;
}

.wh-mobile-solution-card .wh-accordion-content {
  padding: 1.5rem !important;
}

@media (max-width: 64rem) {
  .wh-accordion-grid-desktop {
    display: none !important;
  }
  .wh-accordion-grid-mobile {
    display: flex !important;
  }
}

/* ==========================================================================
   15. COMPOSANT BENTO GRID "APPLE STYLE" (BÉNÉFICES CLÉS)
   ========================================================================== */

.wh-bento-section {
  padding: 5rem 1.25rem !important;
  background-color: var(--brand-bg-light, #F8FAFC) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.wh-bento-header {
  text-align: center !important;
  margin-bottom: 3.5rem !important;
}

.wh-bento-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
  max-width: 75rem !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.wh-bento-card {
  background: #FFFFFF !important;
  border: 1px solid var(--brand-border, #E2E8F0) !important;
  border-radius: 1.5rem !important;
  padding: 2.25rem 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
  box-sizing: border-box !important;
}

.wh-bento-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--brand-primary, #00A3E0) !important;
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.08) !important;
}

.wh-bento-card h3 {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0.25rem 0 0 0 !important;
  line-height: 1.25 !important;
}

.wh-bento-card-desc {
  color: #64748B !important;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

@media (min-width: 64.0625rem) {
  .wh-bento-card-featured,
  .wh-bento-card-wide {
    grid-column: span 2 !important;
  }
}

.wh-bento-badge-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.wh-bento-metric-tag {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: var(--brand-primary, #00A3E0) !important;
  background: rgba(0, 163, 224, 0.1) !important;
  padding: 0.3em 0.75em !important;
  border-radius: 2rem !important;
  text-transform: uppercase !important;
}

.wh-bento-lead {
  font-size: 1.05rem !important;
  color: #475569 !important;
  line-height: 1.5 !important;
  margin: 0.5rem 0 1.25rem 0 !important;
}

.wh-bento-subgrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
  margin-top: auto !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--brand-border, #E2E8F0) !important;
}

.wh-bento-mini-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
}

.wh-bento-mini-item svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex-shrink: 0 !important;
  stroke: var(--brand-primary, #00A3E0) !important;
  margin-top: 0.15rem !important;
}

.wh-bento-mini-item strong {
  display: block !important;
  font-size: 0.875rem !important;
  color: #0F172A !important;
  margin-bottom: 0.15rem !important;
}

.wh-bento-mini-item span {
  display: block !important;
  font-size: 0.8125rem !important;
  color: #64748B !important;
  line-height: 1.35 !important;
}

.wh-bento-card-dark {
  background: var(--brand-dark, #0F172A) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}

.wh-bento-card-dark h3 { color: #FFFFFF !important; }
.wh-bento-card-dark .wh-bento-card-desc { color: #94A3B8 !important; }

.wh-bento-list-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  margin-top: 1rem !important;
}

.wh-bento-stack-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  padding: 0.875rem 1rem !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.75rem !important;
}

.wh-bento-stack-item svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  stroke: var(--brand-primary, #38BDF8) !important;
  flex-shrink: 0 !important;
  margin-top: 0.15rem !important;
}

.wh-bento-stack-item strong {
  display: block !important;
  color: #FFFFFF !important;
  font-size: 0.875rem !important;
  margin-bottom: 0.15rem !important;
}

.wh-bento-stack-item span {
  display: block !important;
  color: #94A3B8 !important;
  font-size: 0.8125rem !important;
  line-height: 1.35 !important;
}

.wh-bento-check-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0.5rem 0 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

.wh-bento-check-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
}

.wh-bento-check-list svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  stroke: var(--brand-primary, #00A3E0) !important;
  flex-shrink: 0 !important;
  margin-top: 0.15rem !important;
}

.wh-bento-check-list strong {
  display: block !important;
  color: #0F172A !important;
  font-size: 0.9rem !important;
  margin-bottom: 0.15rem !important;
}

.wh-bento-check-list span {
  display: block !important;
  color: #64748B !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
}

@media (max-width: 64rem) {
  .wh-bento-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .wh-bento-card-featured,
  .wh-bento-card-wide {
    grid-column: span 1 !important;
  }

  .wh-bento-subgrid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* ==========================================================================
   16. BENTO BLOCK KPI (STRUCTURE MULTI-BRAND & ANIMATIONS 3D DYNAMIQUES)
   ========================================================================== */

.wh-kpi-bento-section {
  padding: 4rem 1.25rem !important;
  background-color: var(--brand-bg-light, #F8FAFC) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.wh-kpi-bento-wrapper {
  background-color: var(--brand-dark, #0B132B) !important;
  border-radius: 2.5rem !important;
  padding: 4rem 3.5rem !important;
  max-width: 75rem !important;
  margin: 0 auto !important;
  box-shadow: 0 1.5rem 3.5rem rgba(11, 19, 43, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  color: #FFFFFF !important;
}

.wh-kpi-bento-wrapper .wh-bento-tag {
  color: var(--brand-primary, #38BDF8) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  margin-bottom: 1rem !important;
  display: inline-block !important;
}

.wh-kpi-bento-wrapper .hero-title {
  color: #FFFFFF !important;
  font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
  line-height: 1.2 !important;
  margin: 0.75rem 0 !important;
  font-weight: 800 !important;
}

.wh-kpi-bento-wrapper .hero-description {
  color: #94A3B8 !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  margin-bottom: 2.25rem !important;
  max-width: 38rem !important;
}

.wh-kpi-bento-wrapper .hero-actions {
  display: flex !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 2.5rem !important;
}

@media (min-width: 62rem) {
  .wh-kpi-bento-wrapper .hero-container {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 3.5rem !important;
    align-items: center !important;
  }
}

@keyframes bentoCardTiltAuto {
  0%, 100% { transform: rotateX(0deg) rotateY(0deg) translateY(0px); }
  25% { transform: rotateX(7deg) rotateY(-10deg) translateY(-4px); }
  50% { transform: rotateX(-5deg) rotateY(8deg) translateY(2px); }
  75% { transform: rotateX(9deg) rotateY(5deg) translateY(-3px); }
}

@keyframes floatCardTop {
  0%, 100% { transform: translateY(0px) translateZ(35px) rotate(0deg); }
  50% { transform: translateY(-10px) translateZ(45px) rotate(1.5deg); }
}

@keyframes floatCardBottom {
  0%, 100% { transform: translateY(0px) translateZ(30px) rotate(0deg); }
  50% { transform: translateY(8px) translateZ(40px) rotate(-1.5deg); }
}

@keyframes scanLaser {
  0% { top: 20%; opacity: 0.3; }
  50% { opacity: 1; }
  100% { top: 80%; opacity: 0.3; }
}

.wh-kpi-bento-wrapper .hero-visual-card {
  width: 100% !important;
  max-width: 26rem !important;
  height: 22.5rem !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 1.25rem !important;
  position: relative !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  animation: bentoCardTiltAuto 6s ease-in-out infinite !important;
  transform-style: preserve-3d !important;
  will-change: transform;
  overflow: visible !important;
}

.wh-kpi-bento-wrapper .ui-mockup-bg {
  padding: 1rem 1.25rem !important;
  opacity: 0.3 !important;
  position: absolute !important;
  inset: 2.5rem 0 0 0 !important;
  pointer-events: none !important;
}

.wh-kpi-bento-wrapper .ui-header {
  display: flex !important;
  gap: 0.5rem !important;
  padding: 1rem 1.25rem 0.25rem 1.25rem !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1 !important;
}

.wh-kpi-bento-wrapper .dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}
.wh-kpi-bento-wrapper .dot.red { background: #EF4444 !important; }
.wh-kpi-bento-wrapper .dot.yellow { background: #F59E0B !important; }
.wh-kpi-bento-wrapper .dot.green { background: #10B981 !important; }

.wh-kpi-bento-wrapper .ui-line {
  height: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 5px !important;
  margin-bottom: 0.875rem !important;
}
.wh-kpi-bento-wrapper .ui-line.long { width: 85% !important; }
.wh-kpi-bento-wrapper .ui-line.medium { width: 55% !important; }

.wh-kpi-bento-wrapper .ui-box {
  height: 10rem !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 8px !important;
  border: 1px dashed rgba(255, 255, 255, 0.12) !important;
}

.wh-kpi-bento-wrapper .floating-card {
  position: absolute !important;
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  padding: 0.65rem 1rem !important;
  border-radius: 0.875rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 10 !important;
}

.wh-kpi-bento-wrapper .floating-card strong {
  display: block !important;
  font-size: 0.85rem !important;
  color: #F8FAFC !important;
}

.wh-kpi-bento-wrapper .floating-card small {
  color: #94A3B8 !important;
  font-size: 0.75rem !important;
}

.wh-kpi-bento-wrapper .icon-box {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: bold !important;
}
.wh-kpi-bento-wrapper .green-bg { background: rgba(16, 185, 129, 0.2) !important; color: #10B981 !important; }
.wh-kpi-bento-wrapper .blue-bg { background: rgba(56, 189, 248, 0.2) !important; color: #38BDF8 !important; }
.wh-kpi-bento-wrapper .orange-bg { background: rgba(238, 90, 36, 0.2) !important; color: #EE5A24 !important; }
.wh-kpi-bento-wrapper .bronze-bg { background: rgba(176, 137, 104, 0.2) !important; color: #B08968 !important; }

.wh-kpi-bento-wrapper .card-top {
  top: 1.5rem !important;
  right: -1rem !important;
  animation: floatCardTop 3.8s ease-in-out infinite !important;
  will-change: transform;
}

.wh-kpi-bento-wrapper .card-bottom {
  bottom: 1.5rem !important;
  left: -1rem !important;
  animation: floatCardBottom 4.4s ease-in-out infinite !important;
  will-change: transform;
}

.wh-brand-object {
  padding: 2.5rem 1.25rem 1rem 1.25rem !important;
  position: relative !important;
  z-index: 2 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.wh-object-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.875rem !important;
  padding: 1.15rem !important;
  position: relative !important;
  z-index: 3 !important;
  width: 90% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.wh-scanner-bar {
  position: absolute !important;
  top: 20% !important;
  left: 8% !important;
  right: 8% !important;
  height: 2px !important;
  background: #1D4ED8 !important;
  box-shadow: 0 0 12px #38BDF8 !important;
  animation: scanLaser 2.5s ease-in-out infinite alternate !important;
  z-index: 5 !important;
}

.wh-tag-pill {
  font-size: 0.7rem !important;
  padding: 0.25em 0.6em !important;
  border-radius: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  display: inline-block !important;
}
.wh-tag-pill.orange { background: rgba(238, 90, 36, 0.2) !important; color: #EE5A24 !important; }
.wh-tag-pill.cyan { background: rgba(0, 163, 224, 0.2) !important; color: #00A3E0 !important; }
.wh-tag-pill.green { background: rgba(16, 185, 129, 0.2) !important; color: #10B981 !important; }

.wh-checklist {
  list-style: none !important;
  margin: 0.875rem 0 0 0 !important;
  padding: 0 !important;
  font-size: 0.85rem !important;
  color: #CBD5E1 !important;
}
.wh-checklist li {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-bottom: 0.35rem !important;
}
.wh-checklist .check {
  color: #10B981 !important;
  font-weight: bold !important;
}

.wh-progress-bar {
  height: 8px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  margin-top: 0.75rem !important;
  overflow: hidden !important;
}
.wh-progress-fill {
  height: 100% !important;
  border-radius: 4px !important;
}
.wh-progress-fill.orange { background: #EE5A24 !important; }
.wh-progress-fill.cyan { background: #00A3E0 !important; }

.wh-kpi-bento-wrapper .brand-only {
  display: none !important;
}

[data-brand="traceabl"] .wh-kpi-bento-wrapper .brand-traceabl,
[data-brand="equipa"] .wh-kpi-bento-wrapper .brand-equipa,
[data-brand="stage"] .wh-kpi-bento-wrapper .brand-stageplus,
[data-brand="stageplus"] .wh-kpi-bento-wrapper .brand-stageplus,
[data-brand="wehoop"] .wh-kpi-bento-wrapper .brand-wehoop,
[data-brand="kiwi"] .wh-kpi-bento-wrapper .brand-kiwi {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  justify-content: center !important;
}

html:not([data-brand]) .wh-kpi-bento-wrapper .brand-wehoop,
body:not([data-brand]) .wh-kpi-bento-wrapper .brand-wehoop {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  justify-content: center !important;
}

[data-brand="equipa"] .wh-kpi-bento-wrapper .hero-visual-card {
  border-color: rgba(238, 90, 36, 0.25) !important;
}
[data-brand="traceabl"] .wh-kpi-bento-wrapper .hero-visual-card {
  border-color: rgba(29, 78, 216, 0.25) !important;
}
[data-brand="stageplus"] .wh-kpi-bento-wrapper .hero-visual-card,
[data-brand="stage"] .wh-kpi-bento-wrapper .hero-visual-card {
  border-color: rgba(0, 163, 224, 0.25) !important;
}
[data-brand="kiwi"] .wh-kpi-bento-wrapper .hero-visual-card {
  border-color: rgba(176, 137, 104, 0.25) !important;
}

.wh-kpi-bento-wrapper .kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-top: 1.75rem !important;
  margin-top: 2rem !important;
}

.wh-kpi-bento-wrapper .kpi-number {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  color: var(--brand-primary, #38BDF8) !important;
  display: block !important;
  line-height: 1.1 !important;
}

.wh-kpi-bento-wrapper .kpi-label {
  color: #94A3B8 !important;
  font-size: 0.85rem !important;
  margin-top: 0.35rem !important;
  line-height: 1.4 !important;
}

@media (max-width: 61.9375rem) {
  .wh-kpi-bento-wrapper {
    padding: 2.5rem 1.5rem !important;
    border-radius: 1.5rem !important;
  }

  .wh-kpi-bento-wrapper .hero-container,
  .wh-kpi-bento-wrapper .kpi-grid {
    grid-template-columns: 1fr !important;
  }
}