/*
 Theme Name:   Divi — Trans-Import Matec
 Theme URI:    https://trans-import-matec.cd
 Description:  Child theme Divi — plateforme B2B/B2C matériaux de construction. Design inspiré cmcbiz (gold/navy glassmorphism, boutons pastilles gloss).
 Author:       Trans-Import Matec
 Version:      2.3.8
 Text Domain:  trans-import-matec
 Requires PHP: 8.0
*/

/* ==========================================================================
   DESIGN TOKENS — AEROSMOKE (thème unique sombre + néon orange charte)
   Charte marque : #FF7900 • #F16E00 • #FF6600
   ========================================================================== */

:root {
  /* — Tokens glass (fond nuit + néons orange charte) — */
  --c-glass: #FFB266;
  --c-light: #FFFFFF;
  --c-dark:  #04060C;
  --c-content: #FFF4E6;
  --c-action:  #FF7900;
  --c-action-2:#F16E00;
  --c-action-3:#FF6600;
  --c-bg: #060A14;
  --c-bg-2:#0B1224;
  --glass-reflex-dark: 2.5;
  --glass-reflex-light: 0.85;
  --saturation: 210%;
  --glass-bg:       color-mix(in srgb, var(--c-bg-2) 82%, transparent);

  /* — Couleurs de texte : claires sur fond sombre — */
  --tim-text:       #E8E2D8;
  --tim-text-dark:  #FFF7EC;
  --tim-slate:      #C0B4A4;

  /* — Halos néon orange pour les ombres — */
  --glow-brand1:    0 0 18px rgba(255,121,0,.5), 0 0 46px rgba(255,121,0,.26);
  --glow-brand2:    0 0 18px rgba(241,110,0,.5), 0 0 46px rgba(241,110,0,.26);
  --glow-brand3:    0 0 18px rgba(255,102,0,.55), 0 0 46px rgba(255,102,0,.3);
  --glow-soft:      0 24px 60px -24px rgba(0,0,0,.8);
}

/* — Design tokens dérivés, connectés aux tokens glass — */
:root {
  --tim-dark:       var(--c-dark);
  --tim-dark-alt:   color-mix(in srgb, var(--c-dark) 88%, #000);
  --tim-navy:       var(--c-bg-2);
  --tim-navy-light: color-mix(in srgb, var(--c-bg-2) 70%, var(--c-content));
  --tim-gold:       var(--c-action);
  --tim-gold-light: color-mix(in srgb, var(--c-action) 55%, var(--c-light));
  --tim-gold-dark:  var(--c-action-2);
  --tim-gold-mid:   color-mix(in srgb, var(--c-action) 80%, var(--c-action-2));
  --tim-light:      var(--c-bg);
  --tim-light-mid:  color-mix(in srgb, var(--c-bg) 86%, var(--c-content));
  --tim-border:     color-mix(in srgb, var(--c-action) 30%, transparent);
  --tim-success:    #34D399;
  --tim-white:      var(--c-light);

  /* Glass */
  --glass-bg-strong:color-mix(in srgb, var(--c-bg-2) 90%, var(--c-light));
  --glass-bg-dark:  color-mix(in srgb, var(--c-dark) 88%, transparent);
  --glass-border:   1.5px solid color-mix(in srgb, var(--c-action) 38%, transparent);
  --glass-blur:     blur(14px) saturate(var(--saturation));
  --glass-shadow:   0 30px 80px -30px rgba(0,0,0,.8), var(--glow-soft);
  --glass-inset:    inset 0 1px 0 color-mix(in srgb, var(--c-light) 55%, transparent);
  --glass-radius:   20px;
  --glass-radius-sm:14px;

  /* Boutons néon */
  --btn-radius:     999px;
  --btn-gold:       linear-gradient(45deg, #ff8c00 0%, #ffd700 50%, #ff6347 100%);
  --btn-gold-shadow:0 12px 34px rgba(255,121,0,.45);
  --btn-gold-hover: linear-gradient(45deg, #ff8c00 0%, #ffd700 50%, #ff6347 100%);

  /* Typography */
--font-heading:   'Montserrat', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:      'Montserrat', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Container */
  --container-max:  1280px;
  --section-pad:    100px 0;
}

/* ==========================================================================
   LIQUID GLASS — designer system futuriste (thème sombre unique)
   ========================================================================== */

/* Transitions globales de thème */
body,
.et_pb_section,
.et_pb_module,
header, footer, main, .tim-topbar,
.bp-section, .bcard, .lg-panel, .aura {
  transition: background 500ms cubic-bezier(1,0,.4,1), color 500ms cubic-bezier(1,0,.4,1), border-color 500ms cubic-bezier(1,0,.4,1);
}

/* — Composant liquid-glass générique (structure : .liquidGlass-wrapper>effect+tint+shine+text) — */
.liquidGlass-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  overflow: hidden;
  color: var(--c-content);
  cursor: pointer;
  border-radius: 999px;
  box-shadow: 0 6px 6px rgba(0,0,0,.2), 0 0 20px rgba(0,0,0,.1);
  transition: all .4s cubic-bezier(.175,.885,.32,2.2);
}
.liquidGlass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;
  -webkit-backdrop-filter: blur(3px) saturate(var(--saturation));
  backdrop-filter: blur(3px) saturate(var(--saturation));
  filter: url(#glass-distortion);
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in srgb, var(--c-light) 8%, transparent);
}
.liquidGlass-tint {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c-light) 14%, transparent);
}
.liquidGlass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  box-shadow:
    inset 2px 2px 1px 0 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 45%), transparent),
    inset -1px -1px 1px 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 40%), transparent),
    inset -3px -12px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 55%), transparent),
    inset 0 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 18%), transparent);
}
.liquidGlass-text {
  z-index: 3;
  position: relative;
  color: var(--c-content);
}

/* — Button verre plein (gradient marque) — */
.lg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  text-decoration: none !important;
  color: var(--c-dark);
  border: 0;
  cursor: pointer;
  isolation: isolate;
  background: linear-gradient(120deg, var(--c-action) 0%, color-mix(in srgb, var(--c-action) 68%, var(--c-light)) 100%);
  box-shadow:
    0 18px 40px -16px color-mix(in srgb, var(--c-action) 65%, transparent),
    inset 2px 2px 1px 0 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -1px -2px 2px 0 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 45%), transparent),
    inset 0 -8px 16px -8px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 22%), transparent);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.lg-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 20%, color-mix(in srgb, var(--c-light) 55%, transparent) 46%, transparent 60%);
  transform: translateX(-140%);
  transition: transform .7s ease;
}
.lg-btn:hover { transform: translateY(-3px) scale(1.02); }
.lg-btn:hover::before { transform: translateX(140%); }
.lg-btn:active { transform: translateY(-1px) scale(.99); }
.lg-btn.lg-btn-ghost {
  background: color-mix(in srgb, var(--c-light) 12%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(var(--saturation));
  backdrop-filter: blur(10px) saturate(var(--saturation));
  border: 1.5px solid color-mix(in srgb, var(--c-light) 40%, transparent);
  color: var(--tim-text-dark);
  box-shadow: inset 1px 1px 1px 0 rgba(255,255,255,.35), 0 12px 30px -16px rgba(0,0,0,.4);
}
.lg-btn.lg-btn-ghost:hover { background: color-mix(in srgb, var(--c-action) 22%, transparent); border-color: color-mix(in srgb, var(--c-action) 55%, transparent); color: var(--c-content); }

/* — Panneaux verre futuristes — */
.lg-panel.lg-panel-smoke {
  background: color-mix(in srgb, var(--c-light) 14%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(var(--saturation));
  backdrop-filter: blur(22px) saturate(var(--saturation));
  border-radius: 24px;
}
.lg-panel.lg-panel-frost {
  background: color-mix(in srgb, var(--c-bg) 52%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-light) 32%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--c-light) 40%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--c-dark) 12%, transparent),
    inset 2px 2px 1px 0 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 50%), transparent),
    inset -2px -2px 2px 0 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 38%), transparent),
    0 30px 70px -34px rgba(0,0,0,.38);
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */

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

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--tim-text);
  background:
    radial-gradient(46% 34% at 12% 6%, rgba(241,110,0,.18), transparent 62%),
    radial-gradient(40% 32% at 88% 12%, rgba(255,121,0,.14), transparent 60%),
    radial-gradient(50% 40% at 50% 96%, rgba(255,102,0,.12), transparent 64%),
    linear-gradient(180deg, #05070F 0%, #070C1A 46%, #05070F 100%);
  background-color: var(--c-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.et_pb_module_title {
  font-family: var(--font-heading);
  color: var(--tim-text-dark);
  letter-spacing: -.01em;
  line-height: 1.25;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.4rem);  font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }

a { color: var(--tim-navy); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--tim-gold-dark); }

::selection { background: var(--tim-dark); color: var(--tim-gold); }

/* ==========================================================================
   TOPBAR
   ========================================================================== */

.tim-topbar {
  background: var(--tim-dark);
  color: rgba(255,255,255,.88);
  font-size: 13px;
  padding: 10px 0;
  letter-spacing: .02em;
  font-family: var(--font-body);
  font-weight: 400;
}

.tim-topbar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.tim-topbar a {
  color: var(--tim-gold);
  font-weight: 600;
  transition: color .25s;
}

.tim-topbar a:hover { color: var(--tim-gold-light); }

.tim-topbar span.sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tim-gold);
  display: inline-block;
  opacity: .6;
}

/* ==========================================================================
   HEADER / NAVIGATION — Frosted Glass clair (logo bien assis)
   ========================================================================== */

#top-header { display: none !important; }

html body.et_fixed_nav #main-header,
#main-header, .site-header {
  background: color-mix(in srgb, #FFFFFF 88%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--c-action) 26%, transparent);
  backdrop-filter: saturate(160%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px) !important;
  box-shadow:
    0 0 22px -10px rgba(255,121,0,.25),
    0 16px 40px -22px rgba(4,6,12,.55) !important;
  transition: background .35s ease, box-shadow .35s ease !important;
}

/* Menu items — pill-shaped with glass border (classic Divi header) */
#main-header #top-menu > li > a,
.site-header .main-navigation .primary-menu-container > ul > li.menu-item > a {
  font-family: var(--font-heading) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--tim-dark) !important;
  padding: .52em 1.05em !important;
  border-radius: var(--btn-radius) !important;
  border: 1px solid color-mix(in srgb, var(--c-action) 28%, transparent) !important;
  background: color-mix(in srgb, #FFFFFF 30%, transparent) !important;
  transition: all .22s ease !important;
  letter-spacing: -.01em !important;
  text-transform: uppercase !important;
}

/* Pills plus grosses sur desktop large */
@media (min-width: 1280px) {
  #main-header #top-menu > li > a {
    font-size: 17px !important;
    padding: .58em 1.2em !important;
  }
}

/* Hover — gold gradient pill with gloss sweep + current item */
#main-header #top-menu > li > a:hover,
#main-header #top-menu > li.current-menu-item > a,
#main-header #top-menu > li.current-menu-ancestor > a,
.site-header .main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.site-header .main-navigation .primary-menu-container > ul > li.current-menu-item > a {
  background: var(--btn-gold) !important;
  color: var(--tim-dark) !important;
  border-color: transparent !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px -6px rgba(255,121,0,.55), 0 0 0 4px rgba(255,121,0,.16) !important;
}

/* Gloss sweep effect on hover */
@media (min-width:1025px) {
  #main-header #top-menu > li > a:hover {
    background-image:
      linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 62%),
      var(--btn-gold) !important;
  }
}

/* Sub-menu — glass dark dropdown */
#main-header #top-menu li ul.sub-menu,
#main-header #et-top-navigation .nav li ul {
  background: linear-gradient(160deg, rgba(16,19,27,.97), rgba(10,13,20,.96)) !important;
  backdrop-filter: saturate(160%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px) !important;
  border: 1px solid color-mix(in srgb, var(--c-action) 34%, transparent) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: 0 20px 60px -12px rgba(4,6,12,.6) !important;
  padding: 16px 12px !important;
  min-width: 260px !important;
  left: 0 !important;
  max-height: calc(100vh - 140px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,121,0,.7) rgba(255,255,255,.14) !important;
  z-index: 2147483000 !important;
}

#main-header #top-menu li ul.sub-menu::-webkit-scrollbar { width: 6px !important; }
#main-header #top-menu li ul.sub-menu::-webkit-scrollbar-thumb { background: rgba(255,121,0,.7) !important; border-radius: 6px !important; }

#main-header #top-menu li ul.sub-menu li a {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--tim-text-dark) !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  border: none !important;
  width: 100% !important;
  transition: all .22s ease !important;
}

#main-header #top-menu li ul.sub-menu li a:hover {
  background: rgba(255,121,0,.14) !important;
  color: var(--tim-dark) !important;
  transform: translateX(2px) !important;
}

/* Menu category headings inside mega menu */
.tim-mega-heading {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--tim-gold-dark);
  padding: 6px 14px;
  margin-bottom: 4px;
}

/* Logo */
#logo { max-height: 56px; width: auto; }

/* Desktop large : logo haut (header 76px) */
@media (min-width: 1280px) {
  #logo { max-height: 64px !important; width: auto !important; }
}

/* Tablette : logo large, bridé pour ne pas empiéter sur le menu */
@media (min-width: 981px) and (max-width: 1099px) {
  #logo { max-height: 36px !important; width: auto !important; }
}

/* ==========================================================================
   HEADER FIXES — marges équilibrées, icônes non rognées
   ========================================================================== */

/* Neutralise le padding-left:85px injecté par le JS Divi (calculé pour un
   logo large) et laisse une vraie marge à droite pour ne rien rogner. */
#et-top-navigation,
.et_header_style_left #et-top-navigation {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Header (76px) : logo + navigation centrés verticalement
   sans casser le layout Divi (pas de flex global, pas de float:none). */
#main-header .logo_container {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 20px;
  box-sizing: border-box;
}

#main-header #et-top-navigation {
  height: 76px;
  box-sizing: border-box;
  padding: 0 12px !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Mobile : logo forcé à une taille cohérente avec le header réduit */
@media (max-width: 981px) {
  #main-header #logo {
    height: 50px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Loupe de recherche : petite, juste à côté du panier */
#main-header #et_top_search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 34px;
  margin-left: 6px;
  margin-right: 2px;
  cursor: pointer;
  line-height: 1;
}
#main-header #et_top_search #et_search_icon {
  font-size: 18px !important;
  line-height: 1;
  color: var(--tim-dark) !important;
  transition: color .2s ease;
}
#main-header #et_top_search:hover #et_search_icon { color: var(--tim-gold-dark) !important; }

/* Icône panier : alignée verticalement avec la loupe */
#main-header .et-cart-info {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 26px;
  height: 34px;
  margin: 0 0 0 10px;
  line-height: 1 !important;
  color: var(--tim-dark) !important;
  font-size: 16px;
  vertical-align: middle;
  position: relative;
}
#main-header .et-cart-info span { display: block; line-height: 1; }

/* ==========================================================================
   BUTTONS — Pastilles Gloss cmcbiz-style
   ========================================================================== */

body #page-container .et_pb_button,
.et_pb_button,
a.et_pb_button,
input[type="submit"],
button,
.button,
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
#respond input[type="submit"],
.woocommerce #respond input#submit,
#add_payment_method .wc-proceed-to-checkout a.checkout-button {
  border-radius: var(--btn-radius) !important;
  padding: 16px 36px !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -.01em !important;
  transition: all .3s cubic-bezier(.4,0,.2,1) !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

/* Boutons primaires — dégradé 3D orange charte (relief lumineux) */
body #page-container .et_pb_button,
.et_pb_button,
.woocommerce a.button,
.woocommerce button.button {
  background: linear-gradient(45deg, #ff8c00 0%, #ffd700 50%, #ff6347 100%) !important;
  color: var(--c-dark) !important;
  box-shadow:
    0 0 26px -6px rgba(255,121,0,.55),
    0 22px 46px -16px rgba(241,110,0,.55),
    inset 0 2px 0 0 rgba(255,255,255,.45),
    inset 0 -3px 6px -2px rgba(4,6,12,.35) !important;
  -webkit-backdrop-filter: blur(6px) saturate(var(--saturation));
  backdrop-filter: blur(6px) saturate(var(--saturation));
}

body #page-container .et_pb_button:hover,
.et_pb_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: linear-gradient(45deg, #ff8c00 0%, #ffd700 50%, #ff6347 100%) !important;
  color: var(--c-dark) !important;
  box-shadow:
    0 0 38px -4px rgba(255,121,0,.7),
    0 28px 64px -14px rgba(241,110,0,.7),
    inset 0 2px 0 0 rgba(255,255,255,.55),
    inset 0 -3px 6px -2px rgba(4,6,12,.3) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

/* Gloss sweep animation on buttons */
.et_pb_button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}

.et_pb_button:hover::after {
  left: 130%;
}

/* Ghost button */
.tim-btn-ghost {
  background: rgba(255,255,255,.12) !important;
  color: var(--tim-white) !important;
  border: 1.5px solid rgba(255,255,255,.55) !important;
  backdrop-filter: blur(10px);
}

.tim-btn-ghost:hover {
  background: rgba(255,255,255,.25) !important;
  transform: translateY(-2px) !important;
}

/* Dark button */
.tim-btn-dark {
  background: linear-gradient(135deg, var(--tim-dark), var(--tim-navy)) !important;
  color: var(--tim-white) !important;
  box-shadow: 0 16px 36px -18px rgba(4,6,12,.6) !important;
}

.tim-btn-dark:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 20px 48px -18px rgba(4,6,12,.7) !important;
}

/* Small button */
.tim-btn-sm,
.woocommerce ul.products li.product .button {
  padding: 10px 24px !important;
  font-size: 13px !important;
}

/* ==========================================================================
   GLASS CARDS
   ========================================================================== */

.liquid-glass,
.glass-card {
  background: color-mix(in srgb, var(--c-bg-2) 62%, transparent);
  backdrop-filter: blur(24px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(24px) saturate(var(--saturation));
  border: 1px solid color-mix(in srgb, var(--c-action) 32%, transparent);
  border-radius: var(--glass-radius);
  box-shadow:
    0 0 16px -6px rgba(255,121,0,.34),
    inset 0 1px 0 color-mix(in srgb, var(--c-light) 55%, transparent),
    inset 2px 2px 1px 0 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 50%), transparent),
    inset -2px -2px 2px 0 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 38%), transparent),
    inset 0 -14px 24px -14px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 26%), transparent),
    0 36px 90px -34px rgba(0,0,0,.72);
  transition: transform .3s ease, box-shadow .3s ease, background .5s ease;
}

.liquid-glass:hover,
.glass-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 28px -4px rgba(255,121,0,.5),
    0 44px 100px -36px rgba(0,0,0,.82);
}

.liquid-glass-dark {
  background: var(--glass-bg-dark);
  backdrop-filter: blur(22px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(22px) saturate(var(--saturation));
  border: 1px solid color-mix(in srgb, var(--c-light) 20%, transparent);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  color: var(--tim-white);
}

/* ==========================================================================
   HOMEPAGE — HERO
   ========================================================================== */

.tim-hero.cmc-hero {
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--c-dark);
}
.tim-hero-lg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: .35;
  mask-image: radial-gradient(90% 90% at 62% 36%, transparent 30%, #000 74%);
  -webkit-mask-image: radial-gradient(90% 90% at 62% 36%, transparent 30%, #000 74%);
}
.tim-hero .cmc-slider { position: relative; z-index: 2; }

/* ==========================================================================
   CMC HERO — Slider glassbox (adapté du design cmcbiz)
   ========================================================================== */

.tim-hero .cmc-slider{
  position:relative;width:100%;height:min(88vh,900px);min-height:680px;overflow:hidden;
  background:linear-gradient(180deg, rgba(4,6,12,.72) 0%, rgba(4,6,12,.30) 55%, rgba(4,6,12,.72) 100%);
}

.tim-hero .cslide{
  position:absolute;inset:0;z-index:1;opacity:0;visibility:hidden;transform:translateX(100%) scale(1.05);
  transition:transform 1.9s cubic-bezier(.22,.61,.36,1),opacity 1.2s cubic-bezier(.22,.61,.36,1),visibility 0s 1.9s;
}
.tim-hero .cslide.from-l{transform:translateX(-100%) scale(1.05);}
.tim-hero .cslide.from-r{transform:translateX(100%) scale(1.05);}
.tim-hero .cslide.out-l{z-index:2;opacity:0;visibility:visible;transform:translateX(-100%) scale(1.05);transition:transform 1.6s cubic-bezier(.55,.06,.68,.19),opacity 1.1s cubic-bezier(.55,.06,.68,.19),visibility 0s 1.6s;}
.tim-hero .cslide.out-r{z-index:2;opacity:0;visibility:visible;transform:translateX(100%) scale(1.05);transition:transform 1.6s cubic-bezier(.55,.06,.68,.19),opacity 1.1s cubic-bezier(.55,.06,.68,.19),visibility 0s 1.6s;}
.tim-hero .cslide.active{z-index:3;opacity:1;visibility:visible;transform:translateX(0) scale(1);transition:transform 1.9s cubic-bezier(.22,.61,.36,1),opacity 1.2s cubic-bezier(.22,.61,.36,1),visibility 0s 0s;}
.tim-hero .cslide.no-anim{transition:none !important;}

.tim-hero .cslide-bgwrap{
  position:absolute;inset:-4%;will-change:transform;
}
.tim-hero .cslide-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1);
  filter:blur(22px);transition:filter 1.3s cubic-bezier(.22,.61,.36,1);will-change:transform,filter,background-position;
}
.tim-hero .cslide.active .cslide-bg{animation:cmcKenburns 11s ease-in-out infinite alternate;filter:blur(0);}
.tim-hero .cslide.out-l .cslide-bg,.tim-hero .cslide.out-r .cslide-bg{filter:blur(30px);}

.tim-hero .cslide-videowrap{
  position:absolute;inset:0;overflow:hidden;z-index:1;
}
.tim-hero .cslide-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease;
}
.tim-hero .cslide.active .cslide-video{opacity:1;}

.tim-hero .cslide-shade{
  position:absolute;left:0;top:0;bottom:0;width:min(58%,760px);
  background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,0) 100%);
}

.tim-hero .cmc-deco{position:absolute;inset:0;z-index:4;pointer-events:none;}
.tim-hero .cmc-deco .cmc-deco-logo{position:absolute;bottom:196px;left:40px;height:66px;width:auto;}
.tim-hero .cmc-deco .cmc-deco-accents{position:absolute;bottom:132px;left:40px;display:flex;gap:12px;align-items:flex-end;}
.tim-hero .cmc-deco .cmc-deco-accents img{height:48px;width:auto;}

.tim-hero .cmc-aurora{
  position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;z-index:2;pointer-events:none;mix-blend-mode:screen;
}
.tim-hero .cmc-aurora.b1{width:540px;height:540px;left:-150px;top:-130px;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 66%);animation:cmcFloat 12s ease-in-out infinite;}
.tim-hero .cmc-aurora.b2{width:470px;height:470px;right:-140px;bottom:-170px;background:radial-gradient(circle,rgba(255,255,255,.5),transparent 66%);animation:cmcFloat 14s ease-in-out infinite reverse;}

/* Bokeh dérivant (profondeur) */
.tim-hero .cmc-bokeh{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;z-index:2;pointer-events:none;mix-blend-mode:screen;animation:cmcDrift 26s ease-in-out infinite alternate;}
.tim-hero .cmc-bokeh.b1{width:210px;height:210px;left:15%;top:16%;background:radial-gradient(circle,rgba(255,196,120,.55),transparent 65%);animation-duration:23s;}
.tim-hero .cmc-bokeh.b2{width:150px;height:150px;right:22%;bottom:24%;background:radial-gradient(circle,rgba(160,220,255,.4),transparent 65%);animation-duration:31s;animation-delay:-8s;}
.tim-hero .cmc-bokeh.b3{width:110px;height:110px;left:34%;top:62%;background:radial-gradient(circle,rgba(255,255,255,.45),transparent 65%);animation-duration:19s;animation-delay:-13s;}
@keyframes cmcDrift{0%{transform:translate3d(0,-26px,0) scale(.9);opacity:.35}100%{transform:translate3d(34px,26px,0) scale(1.12);opacity:.55}}

/* Vignette (profondeur) */
.tim-hero .cmc-slider::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%,transparent 54%,rgba(0,0,0,.32) 100%);}

/* Halo lumineux derrière la glassbox */
.tim-hero .glassbox{position:relative;}
.tim-hero .glassbox::before{content:"";position:absolute;inset:-46px;z-index:-1;border-radius:44px;background:radial-gradient(60% 60% at 50% 50%,rgba(255,255,255,.22),rgba(255,255,255,0) 72%);pointer-events:none;}

/* Contour dédié aux deux cartes de la slide Onduline */
.tim-hero .cslide.cslide-gallery .glassbox{
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 6px rgba(255,255,255,.22),0 34px 90px -34px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.35);
}

/* Carrousel diaporama minimal superposé (slide Onduline) */
.tim-hero .cmc-gal{
  position:absolute;right:120px;top:50%;transform:translateY(-50%);z-index:5;
  opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s;
}
.tim-hero .cmc-gal.show{opacity:1;visibility:visible;}
.tim-hero .cmc-gal-stage{position:relative;border-radius:24px;overflow:hidden;border:2px solid rgba(255,255,255,.85);box-shadow:0 0 0 6px rgba(255,255,255,.22),0 40px 90px -30px rgba(0,0,0,.75);background:#14161c;}
.tim-hero .cmc-gal-item{
  position:absolute;inset:0;margin:0;background:#14161c;pointer-events:none;
  opacity:0;transform:translateX(4%) scale(.99);
  transition:opacity .75s ease,transform .85s cubic-bezier(.16,1,.3,1);
}
.tim-hero .cmc-gal-item.active{opacity:1;transform:translateX(0) scale(1);z-index:2;}
.tim-hero .cmc-gal-item img{width:100%;height:100%;object-fit:cover;}
.tim-hero .cmc-gal-item.active img{animation:cmcKenburns 12s ease-in-out infinite alternate;}
.tim-hero .cmc-gal-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.35);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.9;transition:background .25s ease,opacity .25s ease;}
.tim-hero .cmc-gal-arrow:hover{background:rgba(255,121,0,.7);opacity:1;}
.tim-hero .cmc-gal-arrow.prev{left:12px;}
.tim-hero .cmc-gal-arrow.next{right:12px;}
.tim-hero .cmc-gal-count{position:absolute;top:14px;left:14px;z-index:3;color:rgba(255,255,255,.92);font-size:12px;letter-spacing:.12em;text-shadow:0 2px 8px rgba(0,0,0,.6);}

/* Logo Onduline au-dessus des cartes (slide 3) */
.tim-hero .cmc-onduline-logo{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:4;pointer-events:none;text-align:center;opacity:0;transition:opacity .6s ease;}
.tim-hero .cmc-onduline-logo.show{opacity:1;}
.tim-hero .cmc-onduline-logo::before{
  content:"";position:absolute;inset:-20px -56px -10px -56px;z-index:-1;border-radius:46px;
  background:radial-gradient(58% 58% at 50% 50%,rgba(255,255,255,.72),rgba(255,255,255,.18) 62%,rgba(255,255,255,0) 76%);
  filter:blur(5px);
}
.tim-hero .cmc-onduline-logo img{
  height:92px;width:auto;max-width:78vw;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.75)) drop-shadow(0 0 12px rgba(255,255,255,.4)) drop-shadow(0 14px 24px rgba(0,0,0,.6));
}
@media (max-width:1199px){
  .tim-hero .cmc-onduline-logo{display:none;}
  .tim-hero .cmc-gal{display:none;}
}

.tim-hero .cslide-content{position:relative;z-index:3;height:100%;display:flex;align-items:center;}
.tim-hero .cslide.cslide-raise .cslide-content{transform:translate(-56px,-11%);}
@media (max-width:1024px){
  .tim-hero .cslide.cslide-raise .cslide-content{transform:translate(-20px,-7%);}
}
.tim-hero .cmc-shell{width:min(1200px,92%);margin:0 auto;display:flex;justify-content:flex-start;}
.tim-hero .cmc-shell.cmc-shell-right{justify-content:flex-end;}

/* Carte superposée (glassbox) */
.tim-hero .glassbox{
  display:inline-flex;flex-direction:column;gap:18px;max-width:660px;padding:40px 46px;border-radius:32px;text-align:left;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 34px 90px -34px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.35);
  transform:translate3d(0,46px,0) scale(.98);opacity:0;
}
.tim-hero .cslide.active .glassbox{animation:cmcRiseIn 1.05s cubic-bezier(.16,1,.3,1) .1s forwards;}

.tim-hero .cmc-kicker{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:9px 18px 9px 14px;border-radius:999px;
  background:rgba(255,121,0,.16);border:1px solid rgba(255,121,0,.4);color:var(--c-action);font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
}
.tim-hero .cmc-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tim-gold);box-shadow:0 0 0 4px rgba(255,121,0,.25);animation:cmcPulse 1.6s ease-in-out infinite;}

.tim-hero .cmc-title{font-family:var(--font-heading);font-weight:800;color:#FFFFFF;font-size:clamp(36px,4.9vw,60px);line-height:1.08;letter-spacing:-0.025em;margin:0;text-shadow:0 12px 44px rgba(0,0,0,.45);}
.tim-hero .cmc-grad{background:linear-gradient(92deg,var(--c-action) 0%,var(--c-action-2) 38%,var(--c-action) 74%,var(--c-action) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:cmcShimmer 7s ease-in-out infinite;}
.tim-hero .cmc-desc{color:rgba(255,255,255,.88);font-size:17px;line-height:1.72;margin:0;max-width:560px;}
.tim-hero .cmc-btns{display:flex;gap:16px;flex-wrap:wrap;}
.tim-hero .cslide .cmc-kicker,.tim-hero .cslide .cmc-title,.tim-hero .cslide .cmc-desc,.tim-hero .cslide .cmc-btns{opacity:0;transition:opacity .9s ease;}
.tim-hero .cslide.active .cmc-kicker{opacity:1;transition-delay:.85s;}
.tim-hero .cslide.active .cmc-title{opacity:1;transition-delay:1.2s;}
.tim-hero .cslide.active .cmc-desc{opacity:1;transition-delay:1.55s;}
.tim-hero .cslide.active .cmc-btns{opacity:1;transition-delay:1.9s;}

/* Flèches */
.tim-hero .cmc-arrow{
  position:absolute;top:50%;transform:translateY(-50%) rotate(45deg);z-index:6;width:60px;height:60px;border-radius:14px;
  border:2px solid rgba(255,121,0,.8);background:rgba(4,6,12,.5);color:var(--tim-gold);cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 22px rgba(255,121,0,.25),inset 0 0 16px rgba(255,121,0,.10);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .25s ease,color .25s ease,box-shadow .25s ease,border-color .25s ease;user-select:none;
}
.tim-hero .cmc-arrow::after{content:'';position:absolute;top:1px;left:1px;width:15px;height:15px;background:linear-gradient(135deg,var(--tim-gold),rgba(255,121,0,0));clip-path:polygon(0 0,100% 0,0 100%);opacity:.55;pointer-events:none;}
.tim-hero .cmc-arrow .cmc-g{display:block;font-size:46px;font-weight:700;line-height:1;transform:rotate(-45deg);}
.tim-hero .cmc-arrow:hover{background:var(--tim-gold);color:var(--c-dark);border-color:var(--tim-gold);box-shadow:0 0 36px rgba(255,121,0,.55),inset 0 0 16px rgba(0,0,0,.15);transform:translateY(-50%) rotate(45deg) scale(1.08);}
.tim-hero .cmc-arrow.prev{left:24px;}
.tim-hero .cmc-arrow.next{right:24px;}

/* Points de navigation */
.tim-hero .cmc-dots{position:absolute;bottom:124px;left:50%;transform:translateX(-50%);z-index:7;display:flex;gap:10px;}
#tim-hero .cmc-dots .cmc-dot{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.4);border:none;padding:0 !important;margin:0;cursor:pointer;flex:0 0 auto;transition:width .35s cubic-bezier(.16,1,.3,1),background .3s ease;}
#tim-hero .cmc-dots .cmc-dot.active{width:30px;background:var(--tim-gold);box-shadow:0 0 0 5px rgba(255,121,0,.18);}

/* Indicateur de scroll */
.tim-hero .cmc-scroll{position:absolute;right:30px;bottom:122px;z-index:6;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.8);font-size:11px;letter-spacing:.22em;text-transform:uppercase;}
.tim-hero .cmc-wheel{width:22px;height:38px;border:2px solid rgba(255,255,255,.55);border-radius:14px;position:relative;}
.tim-hero .cmc-wheel::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:3px;background:var(--tim-gold);animation:cmcWheel 1.6s ease-in-out infinite;}

/* Vagues */
.tim-hero .cmc-wave{position:absolute;left:0;right:0;bottom:-1px;height:120px;z-index:5;overflow:hidden;pointer-events:none;}
.tim-hero .cmc-wave-move{position:absolute;width:200%;height:100%;left:0;display:flex;}
.tim-hero .cmc-wave-move svg{width:50%;height:100%;flex:none;}
.tim-hero .cmc-wave-back{animation:cmcDrift 18s linear infinite;}
.tim-hero .cmc-wave-front{animation:cmcDrift 26s linear infinite alternate;}

/* Boutons pastilles gloss */
.tim-hero .el-btn{display:inline-block;padding:17px 36px;border-radius:999px;font-weight:700;font-size:16px;font-family:var(--font-heading);text-decoration:none !important;line-height:1.2;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,background .25s ease,color .25s ease,border-color .25s ease;}
.tim-hero .el-btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .55s ease;}
.tim-hero .el-btn:hover::after{left:130%;}
.tim-hero .el-btn-gold{
  background:linear-gradient(45deg,#ff8c00 0%,#ffd700 50%,#ff6347 100%);
  color:var(--c-dark) !important;
  box-shadow:
    0 16px 38px -14px color-mix(in srgb,var(--c-action) 75%,transparent),
    inset 0 2px 0 0 rgba(255,255,255,.5),
    inset 0 -3px 6px -2px rgba(4,6,12,.3);
  -webkit-backdrop-filter:blur(6px) saturate(var(--saturation));
  backdrop-filter:blur(6px) saturate(var(--saturation));
}
.tim-hero .el-btn-gold:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 24px 52px -16px color-mix(in srgb,var(--c-action) 90%,transparent);color:var(--c-dark) !important;}
.tim-hero .el-btn-ghost{background:color-mix(in srgb,var(--c-light) 14%,transparent);color:#fff !important;border:1.5px solid color-mix(in srgb,var(--c-light) 45%,transparent);backdrop-filter:blur(10px) saturate(var(--saturation));-webkit-backdrop-filter:blur(10px) saturate(var(--saturation));box-shadow:inset 1px 1px 1px 0 color-mix(in srgb,var(--c-light) 40%,transparent),0 12px 30px -16px rgba(0,0,0,.4);}
.tim-hero .el-btn-ghost:hover{background:var(--c-action);color:var(--c-dark) !important;border-color:var(--c-action);box-shadow:0 18px 40px -14px color-mix(in srgb,var(--c-action) 75%,transparent);transform:translateY(-4px) scale(1.03);}

/* Neutraliser le padding bouton globale Divi (dégonfle dots/flèches) */
#tim-hero .cmc-slider .cmc-arrow,
#tim-hero .cmc-dots .cmc-dot{padding:0 !important;}

/* Keyframes hero */
@keyframes cmcKenburns{0%{transform:scale(1) translate(0,0)}50%{transform:scale(1.14) translate(1.6%,-1.6%)}100%{transform:scale(1) translate(0,0)}}
@keyframes cmcFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(44px,-34px,0) scale(1.12)}}
@keyframes cmcRiseIn{from{transform:translate3d(0,48px,0) scale(.97);opacity:0}62%{transform:translate3d(0,-8px,0) scale(1.012)}to{transform:translate3d(0,0,0) scale(1);opacity:1}}
@keyframes cmcPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}
@keyframes cmcShimmer{0%,100%{background-position:0% center}50%{background-position:100% center}}
@keyframes cmcDrift{to{transform:translateX(-50%)}}
@keyframes cmcWheel{0%{opacity:1;transform:translateY(0)}70%{opacity:0;transform:translateY(12px)}100%{opacity:0}}

@media (max-width:1024px){
  .tim-hero .glassbox{max-width:600px;padding:38px 36px;}
}
@media (max-width:1080px){
  #tim-hero .cmc-arrow{display:none !important;}
}
@media (max-width:767px){
  .tim-hero .cmc-slider{height:80vh;min-height:620px;}
  .tim-hero .glassbox{padding:24px 20px;border-radius:24px;gap:12px;}
  .tim-hero .cmc-title{font-size:clamp(26px,6.5vw,34px);}
  .tim-hero .cmc-desc{font-size:14px;line-height:1.45;}
  .tim-hero .cmc-dots{bottom:84px;}
  .tim-hero .cmc-arrow{display:none !important;}
  .tim-hero .cmc-scroll{display:none !important;}
  .tim-hero .cmc-wave{height:70px;}
  .tim-hero .cmc-deco .cmc-deco-logo{bottom:130px;left:20px;height:42px;top:auto;}
  .tim-hero .cmc-deco .cmc-deco-accents{bottom:88px;left:20px;gap:7px;top:auto;}
  .tim-hero .cslide.cslide-raise .cslide-content{transform:translate(-8px,-4%);}
}
/* --------------------------------------------------------------------------
   MARQUES VEDETTES — Bannières (Bosch / Onduline)
   -------------------------------------------------------------------------- */
.tim-feature-band {
  padding: 90px 0;
  background: var(--tim-light);
}
.tim-feature-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tim-feature-card {
  position: relative;
  border-radius: 24px;
  min-height: 330px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(10, 16, 40, .22);
  transition: transform .35s ease, box-shadow .35s ease;
}
.tim-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 55px rgba(10, 16, 40, .32);
}
.tim-feature-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  padding: 30px 26px;
  background: linear-gradient(180deg, rgba(6, 11, 28, .10) 0%, rgba(6, 11, 28, .55) 45%, rgba(4, 8, 22, .92) 100%);
}
.tim-feature-kicker {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 121, 0, .28), rgba(255, 121, 0, .08));
  border: 1px solid rgba(255, 121, 0, .5);
  color: var(--tim-gold);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tim-feature-body h3 {
  color: var(--tim-white);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.42rem;
  line-height: 1.25;
  margin: 0;
}
.tim-feature-body p {
  color: rgba(255, 255, 255, .85);
  font-size: .95rem;
  line-height: 1.6;
  margin: 0;
}
.tim-feature-link {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--c-action), var(--c-action-2));
  color: var(--c-dark);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(255, 121, 0, .35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.tim-feature-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 121, 0, .45);
}

/* --------------------------------------------------------------------------
   MARQUES — header avec bannière
   -------------------------------------------------------------------------- */
.tim-marques-head {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 44px;
  align-items: center;
  margin-bottom: 56px;
}
.tim-marques-banner {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(10, 16, 40, .18);
}

/* --------------------------------------------------------------------------
   CTA BANDEAU — fond image + overlay
   -------------------------------------------------------------------------- */
.tim-cta-band {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 90px 0;
  text-align: center;
  overflow: hidden;
}
@media (hover:hover) and (pointer:fine){
  .tim-cta-band{background-attachment:fixed;}
}
.tim-cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(6, 11, 28, .78);
}
.tim-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Kicker / pill label */
.el-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 20px;
  border-radius: var(--btn-radius);
  background: linear-gradient(90deg, rgba(255,121,0,.16), rgba(255,121,0,.05));
  border: 1px solid rgba(255,121,0,.3);
  color: var(--tim-gold);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.el-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tim-gold), var(--c-action-2));
  box-shadow: 0 0 0 4px rgba(255,121,0,.2);
}

/* ==========================================================================
   HOMEPAGE — CATEGORY GRID
   ========================================================================== */

.tim-cat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* =========================================================
   NOS CATÉGORIES (page-home) — cartes uniformisées
   Cartes = hauteurs égales, zone image 4/3 cohérente,
   titre/typo alignés en bas → grille propre (1540/1280).
   ========================================================= */
.tim-cat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}

.tim-cat-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-radius: 18px;
  background:
    linear-gradient(165deg, rgba(255,255,255,.9), rgba(255,255,255,.62)),
    var(--tim-white);
  border: 1px solid rgba(127,102,77,.14);
  box-shadow: 0 24px 54px -28px rgba(4,6,12,.35), inset 0 1px 0 0 rgba(255,255,255,.9);
  padding: 24px 18px;
  text-align: center;
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.tim-cat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,121,0,.42);
  box-shadow: 0 40px 84px -34px rgba(255,121,0,.55), inset 0 1px 0 0 rgba(255,255,255,.9);
}

/* Zone image uniforme : pleine largeur, ratio 4/3, recadrage cover */
.tim-cat-card > img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  margin: 0 0 16px;
  background: var(--tim-white);
}

/* Tusile fallback (aucune image) : même pied que les cartes à image */
.tim-cat-card > div[style*="width:52px"] {
  margin: 4px auto auto !important;
}

/* Titre + compte alignés et poussés vers le bas pour hauteur égale */
.tim-cat-card h4 {
  margin: auto 0 6px !important;
  font-size: 1.02rem;
  line-height: 1.32;
}
.tim-cat-card > span:last-child {
  display: block;
  margin: 0 !important;
  font-size: 13px;
  color: var(--tim-slate);
  white-space: nowrap;
}

@media (min-width: 1381px) { .tim-cat-card { width: calc(16.6666667% - 16.6666667px); } } /* 6 / ligne */
@media (min-width: 1021px) and (max-width: 1380px) { .tim-cat-card { width: calc(20% - 16px); } } /* 5 / ligne */
@media (min-width: 641px) and (max-width: 1020px) { .tim-cat-card { width: calc(33.3333% - 13.3333px); } } /* 3 / ligne */
@media (max-width: 640px) { .tim-cat-card { width: calc(50% - 10px); } } /* 2 / ligne */

/* ==========================================================================
   HOMEPAGE — PILIERS
   ========================================================================== */

.tim-pilier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) { .tim-pilier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .tim-pilier-grid { grid-template-columns: 1fr; } }

.tim-pilier {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  padding: 36px 22px;
  text-align: center;
  transition: transform .3s ease;
}

.tim-pilier:hover { transform: translateY(-4px); }

.tim-pilier-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--btn-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--tim-dark);
  box-shadow: 0 6px 20px rgba(255,121,0,.35);
}

.tim-pilier h4 { margin-bottom: 8px; font-size: 16px; font-weight: 700; }
.tim-pilier p  { font-size: 14px; color: var(--tim-slate); }

/* ==========================================================================
   BRAND CAROUSEL
   ========================================================================== */

.tim-brand-carousel {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 20px 0;
}

.tim-brand-carousel::-webkit-scrollbar { display: none; }

.tim-brand-item {
  scroll-snap-align: center;
  flex: 0 0 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: radial-gradient(ellipse 68% 62% at 50% 50%, #fff 0%, #fff 42%, rgba(255,255,255,.82) 60%, rgba(255,255,255,0) 100%);
  border-radius: var(--glass-radius-sm);
  border: var(--glass-border);
  overflow: hidden;
  transition: all .3s ease;
}

.tim-brand-item:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: rgba(255,121,0,.4);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.tim-brand-item img {
  max-height: 64px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0%);
  opacity: 1;
  transition: filter .3s ease;
}

.tim-brand-item img:hover { filter: grayscale(0%); }

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.section-white  { background: var(--tim-white); padding: var(--section-pad); }
.section-light  { background: var(--tim-light); padding: var(--section-pad); }
.section-dark {
  background: linear-gradient(135deg, var(--tim-dark), var(--tim-navy));
  padding: var(--section-pad);
}
.section-dark h2, .section-dark h3 { color: var(--tim-white); }
.section-dark p  { color: rgba(255,255,255,.8); }

/* ==========================================================================
   WOOCOMMERCE — GRID
   ========================================================================== */

.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
}

/* ==========================================================================
   Main content — fond transparent (thème sombre). La sidebar n'est PAS
   masquée globalement : /boutique/ a sa nav (sidebar.php), les autres pages
   conservent la sidebar Divi standard.
   ========================================================================== */
#main-content {
  background: transparent !important;
}
#main-content .container {
  padding-top: 24px !important;
}

/* ==========================================================================
   ARCHIVES PRODUITS — header de catégorie (titre, description, tri)
   aligné sur le design system glass du site
   ========================================================================== */
body.woocommerce-page #left-area > .woocommerce-breadcrumb {
  margin: 0 0 18px !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tim-slate) !important;
}
body.woocommerce-page header.woocommerce-products-header {
  margin-bottom: 26px !important;
}
body.woocommerce-page .woocommerce-products-header__title {
  font-family: var(--font-heading) !important;
  font-size: clamp(32px, 5vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  color: var(--tim-text-dark) !important;
  letter-spacing: -.02em;
  padding-bottom: 12px !important;
  position: relative;
}
body.woocommerce-page .woocommerce-products-header__title::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 14px;
  border-radius: 99px;
  background: var(--btn-gold);
}
body.woocommerce-page .term-description p {
  color: var(--tim-text) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  max-width: 720px;
}
body.woocommerce-page .woocommerce-result-count {
  color: var(--tim-slate) !important;
  font-size: 13px !important;
}
body.woocommerce-page .woocommerce-ordering select {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--tim-text) !important;
  border: 1px solid var(--tim-border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-family: var(--font-body) !important;
}
body.woocommerce-page .woocommerce-ordering select option {
  background: var(--tim-navy) !important;
  color: var(--tim-text) !important;
}

/* =========================================================================
   105. BOUTIQUE (/boutique/) — sidebar de navigation à GAUCHE, conteneur
   STANDARD Divi (PAS pleine largeur). Le filtre body_class (functions.php)
   ajoute .et_left_sidebar + .tim-shop-layout ; ce bloc garantit l'ordre :
   nav (sidebar) à gauche, produits à droite.
   ========================================================================= */
@media (min-width: 981px) {
  body.tim-shop-layout #content-area {
    display: flex !important;
    align-items: flex-start;
  }
  body.tim-shop-layout #content-area #left-area {
    order: 2;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    float: none !important;
  }
  body.tim-shop-layout #content-area #sidebar {
    order: 1;
    flex: 0 0 258px;
    width: 258px !important;
    margin: 0 34px 0 0 !important;
    float: none !important;
  }
}
@media (max-width: 980px) {
  body.tim-shop-layout #content-area {
    display: flex !important;
    flex-direction: column;
  }
  body.tim-shop-layout #content-area #sidebar {
    order: 1;
    width: 100% !important;
    margin: 0 0 26px !important;
  }
  body.tim-shop-layout #content-area #left-area {
    order: 2;
    width: 100% !important;
  }
}
body.woocommerce-page:not(.single-product) ul.products {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1200px) {
  body.woocommerce-page:not(.single-product) ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 700px) {
  body.woocommerce-page:not(.single-product) ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Boutique (/boutique/ avec sidebar nav à gauche) : 3 produits par ligne à droite */
body.tim-shop-layout.woocommerce-page:not(.single-product) ul.products {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 980px) {
  body.tim-shop-layout.woocommerce-page:not(.single-product) ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 560px) {
  body.tim-shop-layout.woocommerce-page:not(.single-product) ul.products {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

.woocommerce ul.products li.product {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .3s ease, box-shadow .3s ease !important;
  overflow: hidden !important;
}

@media (max-width: 1200px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.45) !important;
}

/* Neutralise les largeurs flottantes % de Divi/WooCommerce (28.33%, 45.25%)
   qui cassent les cartes dans la grille grid — les items doivent remplir les cellules. */
@media (max-width: 980px) {
  .woocommerce ul.products li.product:nth-child(n),
  .woocommerce-page ul.products li.product:nth-child(n) {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
}

.woocommerce ul.products li.product img {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #eef0f3;
  border-radius: var(--glass-radius) var(--glass-radius) 0 0 !important;
  margin: 0 !important;
  transition: transform .4s ease !important;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.03);
}

/* Produits similaires / ventes croisées (fiche produit) : la grille 4 colonnes
   de base est taillée pour les archives pleine largeur. Ici le bloc est plus
   étroit, on passe à 3 colonnes pour des cartes bien proportionnées. */
.related ul.products,
.upsells ul.products {
  grid-template-columns: repeat(3, 1fr) !important;
}
.related { margin-top: 34px; }
@media (max-width: 900px) {
  .related ul.products,
  .upsells ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .related ul.products,
  .upsells ul.products { grid-template-columns: 1fr !important; }
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 18px 22px 4px !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--tim-text-dark) !important;
}

/* Product body (override B2B: brand + CTA, pas de prix/panier) */
.tim-product-body {
  padding: 18px 22px 22px !important;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.tim-loop-brand {
  margin: 4px 0 16px;
}

.tim-loop-brand a,
.tim-loop-brand span {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tim-gold-dark);
  background: rgba(255,121,0,.10);
  border: 1px solid rgba(255,121,0,.25);
  padding: 4px 14px;
  border-radius: var(--btn-radius);
  transition: all .25s ease;
}

.tim-loop-brand a:hover {
  background: var(--btn-gold);
  color: var(--tim-dark);
}

a.tim-btn-view {
  display: block;
  padding: 14px 28px;
  margin-top: auto;
  background: var(--btn-gold);
  color: var(--tim-dark);
  border-radius: var(--btn-radius);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  box-shadow: var(--btn-gold-shadow);
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

a.tim-btn-view:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(255,121,0,.45);
  color: var(--tim-dark);
}

/* Gloss sweep sur le bouton Voir le produit */
a.tim-btn-view::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}

a.tim-btn-view:hover::after { left: 130%; }

/* ==========================================================================
   WOOCOMMERCE — SINGLE PRODUCT  (palette complète depuis logo marque)
   --bp-c  = accent primaire (couleur dominante du logo)
   --bp-c2 = accent secondaire / base sombre
   --bp-c-text = texte sur --bp-c (contraste automatique)
   ========================================================================== */

/* --- Panneau produit --------------------------------------------------- */
.woocommerce div.product {
  background:
    linear-gradient(168deg,
      color-mix(in srgb, var(--bp-c, var(--tim-gold)) 4%, var(--glass-bg-strong)) 0%,
      var(--glass-bg-strong) 32%) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid color-mix(in srgb, var(--bp-c, var(--tim-gold)) 18%, var(--tim-border)) !important;
  border-top: 3.5px solid var(--bp-c, var(--tim-gold)) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.55),
    0 0 0 1px color-mix(in srgb, var(--bp-c, var(--tim-gold)) 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--bp-c, var(--tim-gold)) 6%, var(--tim-white)) !important;
  padding: 40px !important;
  position: relative;
  overflow: hidden;
}

.woocommerce div.product::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(680px 240px at 8% -4%, color-mix(in srgb, var(--bp-c, var(--tim-gold)) 12%, transparent), transparent 58%),
    radial-gradient(440px 180px at 100% 18%, color-mix(in srgb, var(--bp-c2, var(--bp-c)) 7%, transparent), transparent 60%);
}

/* --- Titre ------------------------------------------------------------- */
.woocommerce div.product .product_title {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  color: var(--tim-text-dark) !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  padding-left: 18px;
  position: relative;
}

.woocommerce div.product .product_title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 64%;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--bp-c, var(--tim-gold)), var(--bp-c2, var(--bp-c)));
  box-shadow: 0 0 12px color-mix(in srgb, var(--bp-c, var(--tim-gold)) 40%, transparent);
}

/* --- Galerie images ----------------------------------------------------- */
.woocommerce div.product .woocommerce-product-gallery {
  border-radius: var(--glass-radius-sm) !important;
  overflow: hidden;
}

.woocommerce div.product .woocommerce-product-gallery__image {
  border: 1px solid color-mix(in srgb, var(--bp-c, var(--tim-gold)) 12%, var(--tim-border)) !important;
  border-radius: var(--glass-radius-sm) !important;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.woocommerce div.product .woocommerce-product-gallery__image:hover {
  border-color: color-mix(in srgb, var(--bp-c, var(--tim-gold)) 35%, transparent) !important;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--bp-c, var(--tim-gold)) 12%, transparent);
}

.woocommerce div.product .woocommerce-product-gallery__image.is-active,
.woocommerce div.product .woocommerce-product-gallery__image.active {
  border-color: var(--bp-c, var(--tim-gold)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-c, var(--tim-gold)) 22%, transparent);
}

/* --- Onglets — barre ---------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  background: color-mix(in srgb, var(--bp-c, var(--tim-gold)) 6%, rgba(241,249,245,.6)) !important;
  border-radius: var(--glass-radius-sm) !important;
  padding: 6px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--bp-c, var(--tim-gold)) 14%, var(--tim-border)) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-radius: var(--btn-radius) !important;
  margin: 0 !important;
  border: 0 !important;
  transition: background .2s ease;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active {
  background: linear-gradient(135deg, var(--bp-c, var(--tim-gold)), color-mix(in srgb, var(--bp-c, var(--tim-gold)) 72%, var(--bp-c2, var(--bp-c)))) !important;
  box-shadow:
    0 2px 10px color-mix(in srgb, var(--bp-c, var(--tim-gold)) 38%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--bp-c, var(--tim-gold)) 30%, #fff) !important;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--bp-c-text, var(--tim-dark)) !important;
  text-shadow: none !important;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active) a {
  color: color-mix(in srgb, var(--bp-c, var(--tim-gold)) 55%, var(--tim-text)) !important;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active):hover a {
  color: var(--bp-c, var(--tim-gold)) !important;
}

/* --- Panneaux d'onglets ------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs .panel {
  border-top: 2px solid color-mix(in srgb, var(--bp-c, var(--tim-gold)) 15%, transparent) !important;
  margin-top: 0 !important;
  padding-top: 28px !important;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
  color: var(--bp-c2, var(--tim-text-dark)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--bp-c, var(--tim-gold)) 12%, var(--tim-border));
  padding-bottom: 10px !important;
}

.woocommerce div.product .woocommerce-tabs .panel p {
  color: var(--tim-text) !important;
  line-height: 1.72;
}

/* --- Meta produits (catégories, tags, SKU) ----------------------------- */
.woocommerce div.product .product_meta {
  color: var(--tim-slate) !important;
}

.woocommerce div.product .product_meta a {
  color: var(--bp-c, var(--tim-gold)) !important;
  text-decoration: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--bp-c, var(--tim-gold)) 30%, transparent);
  transition: color .2s, border-color .2s;
}

.woocommerce div.product .product_meta a:hover {
  color: var(--bp-c2, var(--tim-gold)) !important;
  border-bottom-color: var(--bp-c2, var(--bp-c));
}

/* --- CTA "Demander un devis" ------------------------------------------ */
.tim-request-quote {
  margin: 28px 0;
  padding: 24px 28px;
  border-radius: var(--glass-radius-sm);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--bp-c, var(--tim-gold)) 10%, transparent),
      color-mix(in srgb, var(--bp-c2, var(--bp-c)) 5%, transparent)) !important;
  border: 1.5px dashed color-mix(in srgb, var(--bp-c, var(--tim-gold)) 42%, transparent) !important;
  border-left: 3.5px solid var(--bp-c, var(--tim-gold)) !important;
}

.tim-request-quote h3,
.tim-request-quote .tim-quote-title {
  color: var(--bp-c2, var(--tim-text-dark)) !important;
}

.tim-btn-view.tim-btn-quote {
  display: inline-block;
  padding: 16px 38px;
  background: linear-gradient(135deg, var(--bp-c, var(--btn-gold)), color-mix(in srgb, var(--bp-c, var(--btn-gold)) 82%, var(--bp-c2, var(--bp-c)))) !important;
  color: var(--bp-c-text, var(--tim-dark)) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  box-shadow:
    0 14px 36px -8px color-mix(in srgb, var(--bp-c, var(--btn-gold)) 50%, transparent),
    0 0 0 1px color-mix(in srgb, var(--bp-c, var(--btn-gold)) 18%, transparent) !important;
  transition: transform .22s ease, box-shadow .22s ease;
}

.tim-btn-view.tim-btn-quote:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 18px 44px -8px color-mix(in srgb, var(--bp-c, var(--btn-gold)) 60%, transparent),
    0 0 0 1px color-mix(in srgb, var(--bp-c, var(--btn-gold)) 28%, transparent) !important;
  filter: brightness(1.04);
}

.tim-quote-note {
  font-size: 13px;
  color: var(--tim-slate);
  margin: 12px 0 0;
}

/* --- Liens inside entry content ---------------------------------------- */
.woocommerce div.product .entry-content a {
  color: var(--bp-c, var(--tim-gold));
  transition: color .2s;
}
.woocommerce div.product .entry-content a:hover {
  color: var(--bp-c2, var(--bp-c));
}

/* --- Breadcrumbs (dernier élément en couleur) -------------------------- */
.woocommerce .woocommerce-breadcrumb a:last-child {
  color: var(--bp-c, var(--tim-gold)) !important;
}

/* --- Related products -------------------------------------------------- */
.woocommerce div.product .related.products h2 {
  color: var(--bp-c2, var(--tim-text-dark)) !important;
  border-bottom: 2px solid color-mix(in srgb, var(--bp-c, var(--tim-gold)) 25%, transparent);
  padding-bottom: 10px;
}

.woocommerce ul.products li.product {
  border: 1px solid color-mix(in srgb, var(--bp-c, var(--tim-gold)) 10%, var(--tim-border)) !important;
  border-radius: var(--glass-radius-sm) !important;
  transition: border-color .25s, box-shadow .25s;
}

.woocommerce ul.products li.product:hover {
  border-color: color-mix(in srgb, var(--bp-c, var(--tim-gold)) 30%, transparent) !important;
  box-shadow: 0 6px 24px -6px color-mix(in srgb, var(--bp-c, var(--tim-gold)) 14%, transparent);
}

/* --- Prix (si visible ailleurs) ----------------------------------------- */
.woocommerce div.product .price,
.woocommerce div.product .amount {
  color: var(--bp-c2, var(--tim-text-dark)) !important;
}

/* --- Bouton single_add_to_cart (si visible) ---------------------------- */
.woocommerce div.product button.single_add_to_cart_button {
  background: linear-gradient(135deg, var(--bp-c, var(--btn-gold)), color-mix(in srgb, var(--bp-c, var(--btn-gold)) 80%, var(--bp-c2, var(--bp-c)))) !important;
  color: var(--bp-c-text, var(--tim-dark)) !important;
  border: 0 !important;
  border-radius: var(--btn-radius) !important;
  font-weight: 700 !important;
}

/* --- Input focus brand-tint -------------------------------------------- */
.woocommerce div.product input:focus,
.woocommerce div.product textarea:focus,
.woocommerce div.product select:focus {
  border-color: var(--bp-c, var(--tim-gold)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-c, var(--tim-gold)) 14%, transparent) !important;
}

/* --- Badge "marque" (si existe) ---------------------------------------- */
.woocommerce div.product .posted_in a,
.woocommerce div.product .tagged_as a {
  color: var(--bp-c, var(--tim-gold)) !important;
}

/* ==========================================================================
   HIDE PRICES + ADD-TO-CART ON LISTINGS
   ========================================================================== */

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_external,
.woocommerce ul.products li.product .product_type_grouped,
.woocommerce ul.products li.product .product_type_variable,
.woocommerce-loop-product__link .button,
.woocommerce-loop-product__link .add_to_cart_button,
ul.products .price,
ul.products .button,
ul.products .add_to_cart_button {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Bouton "Voir le produit" — rendu dans content-product.php (tim-btn-view) */

/* Sur la page single product — masquer le prix ET le panier */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .cart,
.woocommerce div.product button.single_add_to_cart_button,
.woocommerce div.product .quantity,
.woocommerce #respond input#submit,
.woocommerce a.cart_btn,
.woocommerce #content input.button {
  display: none !important;
}

/* Panier page — masquer le bouton de quantité */
.woocommerce .quantity .qty,
.woocommerce-cart table.cart td.actions .coupon input.input-text {
  display: none !important;
}

/* Ajouter au panier sur la page produit: masquer les boutons d'ajout mais garder le lien fiche */
.woocommerce #content .product .cart .button,
.woocommerce .product .cart .button,
.woocommerce-page .product .cart .button {
  display: none !important;
}

/* Le prix sur le single product: masquer */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  display: none !important;
}

/* ==========================================================================
   CART / CHECKOUT
   ========================================================================== */

.woocommerce-cart table.cart,
.woocommerce-checkout #order_review {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(10px) !important;
  border: var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow) !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border-radius: 12px !important;
  border: 1px solid var(--tim-border) !important;
  padding: 12px 16px !important;
  transition: border-color .25s ease, box-shadow .25s ease !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--tim-gold) !important;
  box-shadow: 0 0 0 3px rgba(255,121,0,.12) !important;
  outline: none !important;
}

/* ==========================================================================
   BRAND PAGE
   ========================================================================== */

.tim-brand-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--glass-radius);
  margin-bottom: 48px;
}

.tim-brand-hero img.hero-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

.tim-brand-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(4,6,12,.78), rgba(4,6,12,.42));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
}

.tim-brand-hero-overlay img.brand-logo {
  max-height: 100px;
  max-width: 220px;
  margin-bottom: 20px;
  filter: brightness(0) invert(1);
}

.tim-brand-hero-overlay h1 { color: var(--tim-white) !important; font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 12px; }
.tim-brand-hero-overlay p  { color: rgba(255,255,255,.85); font-size: 1.1rem; max-width: 600px; }

/* ==========================================================================
   FOOTER — cmcbiz-style navy + gold border
   ========================================================================== */

#main-footer {
  background: var(--tim-dark-alt) !important;
  border-top: 3px solid var(--tim-gold) !important;
  position: relative;
}

#main-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(640px 300px at 15% 0%, rgba(255,121,0,.08), transparent 60%),
    radial-gradient(700px 360px at 90% 100%, rgba(37,99,235,.10), transparent 60%);
  pointer-events: none;
}

#main-footer h4,
#main-footer h3,
.footer-widget h4 {
  color: var(--tim-white) !important;
  font-family: var(--font-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin-bottom: 20px !important;
}

.footer-widget p,
.footer-widget a,
.footer-widget li {
  color: rgba(255,255,255,.72) !important;
}

.footer-widget a:hover { color: var(--tim-gold) !important; }

#footer-bottom {
  background: rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

#footer-bottom p {
  color: rgba(255,255,255,.5) !important;
  font-size: 13px !important;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.woocommerce nav.woocommerce-pagination ul {
  border: none !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}

.woocommerce nav.woocommerce-pagination ul li { border: none !important; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: var(--btn-radius) !important;
  padding: 10px 20px !important;
  border: 1px solid var(--tim-border) !important;
  background: var(--glass-bg) !important;
  color: var(--tim-text-dark) !important;
  transition: all .22s ease !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--btn-gold) !important;
  color: var(--tim-dark) !important;
  border-color: var(--tim-gold) !important;
  box-shadow: 0 4px 12px rgba(255,121,0,.3);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Catégories — grille flex centrée (les cartes restantes restent au centre) */
@media (max-width: 1220px) and (min-width: 1021px) {
  .tim-cat-card { width: calc(20% - 16px); }        /* 5 par ligne */
}
@media (max-width: 1020px) and (min-width: 821px) {
  .tim-cat-card { width: calc(25% - 15px); }        /* 4 par ligne */
}
@media (max-width: 820px) and (min-width: 621px) {
  .tim-cat-card { width: calc(33.33333% - 13.33334px); } /* 3 par ligne */
}
@media (max-width: 620px) and (min-width: 481px) {
  .tim-cat-card { width: calc(50% - 10px); }        /* 2 par ligne */
}
@media (max-width: 480px) {
  .tim-cat-card { width: 100%; }                    /* 1 par ligne */
}

@media (max-width: 768px) {
  :root { --section-pad: 60px 0; }
  .tim-brand-hero img.hero-img { height: 250px; }
  .tim-pilier-grid { grid-template-columns: 1fr; }
  .tim-topbar-inner { gap: 12px; font-size: 12px; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .tim-feature-band { padding: 60px 0; }
  .tim-marques-banner { max-height: 200px; }
}

@media (max-width: 1000px) {
  .tim-feature-inner { grid-template-columns: 1fr; }
  .tim-feature-card { min-height: 290px; }
  .tim-marques-head { grid-template-columns: 1fr; gap: 24px; }
  .tim-marques-banner { width: 100%; }
}

/* ==========================================================================
   MISC
   ========================================================================== */

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
  border-radius: var(--glass-radius-sm) !important;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(10px) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

.et_pb_fullwidth_section,
.et_pb_section {
  transition: background .4s ease !important;
}

/* Marque page: all products grid */
.container .section-white {
  background: var(--tim-white);
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--tim-light); }
::-webkit-scrollbar-thumb { background: var(--tim-border); border-radius: 4px; }

/* ============================================================
   Sous-menu "Boutique" : barre horizontale pleine largeur,
   collée juste sous le header (desktop uniquement)
   ============================================================ */
@media (min-width: 981px) {
  #main-header .et_menu_container,
  #main-header .menu-item-149 { position: static !important; }
  #main-header #top-menu li#menu-item-149 > ul.sub-menu {
    position: absolute !important;
    top: calc(100% - 20px) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
gap: 0 18px !important;
    padding: 16px max(24px, calc((100vw - 1080px) / 2)) !important;
    border: none !important;
    border-top: 2px solid var(--tim-accent, var(--c-action)) !important;
    border-radius: 0 0 18px 18px !important;
    background: rgba(20, 22, 28, 0.97) !important;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.55) !important;
    list-style: none !important;
    z-index: 999999 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    transition: opacity .2s ease 0s, transform .2s ease 0s, visibility 0s .2s !important;
  }
  #main-header #top-menu li#menu-item-149 > ul.sub-menu li {
    width: auto !important;
    float: none !important;
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #main-header #top-menu li#menu-item-149 > ul.sub-menu a {
    display: inline-block !important;
    width: auto !important;
    padding: 7px 8px !important;
    color: var(--tim-text-dark) !important;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 1;
    letter-spacing: .01em;
  }
  #main-header #top-menu li#menu-item-149 > ul.sub-menu a:hover {
    background: rgba(255,121,0,.16) !important;
    transform: none !important;
    color: #fff !important;
  }
  #main-header .menu-item-150 { position: static !important; }
  #main-header #top-menu li#menu-item-150 > ul.sub-menu {
    position: absolute !important;
    top: calc(100% - 20px) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
gap: 0 10px !important;
    padding: 14px 20px !important;
    border: none !important;
    border-top: 2px solid var(--tim-accent, var(--c-action)) !important;
    border-radius: 0 0 18px 18px !important;
    background: rgba(20, 22, 28, 0.97) !important;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.55) !important;
    list-style: none !important;
    z-index: 999999 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    transition: opacity .2s ease 0s, transform .2s ease 0s, visibility 0s .2s !important;
  }
  #main-header #top-menu li#menu-item-150 > ul.sub-menu li {
    width: auto !important;
    float: none !important;
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #main-header #top-menu li#menu-item-150 > ul.sub-menu a {
    display: inline-block !important;
    width: auto !important;
    padding: 5px 5px !important;
    color: var(--tim-text-dark) !important;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 1;
    letter-spacing: .01em;
  }
  #main-header #top-menu li#menu-item-150 > ul.sub-menu a:hover {
    background: rgba(255,121,0,.16) !important;
    color: #fff !important;
  }
  /* État "ouvert" forcé (clavier) + styles partagés */
  #main-header #top-menu li#menu-item-149 > a::after,
  #main-header #top-menu li#menu-item-150 > a::after {
    display: inline-block;
    transition: transform .25s ease;
  }
  #main-header #top-menu li#menu-item-149:hover > a::after,
  #main-header #top-menu li#menu-item-150:hover > a::after,
  #main-header #top-menu li#menu-item-149.mega-open > a::after,
  #main-header #top-menu li#menu-item-150.mega-open > a::after {
    transform: rotate(180deg);
  }
  #main-header #top-menu li#menu-item-149:hover > a,
  #main-header #top-menu li#menu-item-150:hover > a,
  #main-header #top-menu li#menu-item-149.mega-open > a,
  #main-header #top-menu li#menu-item-150.mega-open > a {
    color: var(--tim-dark) !important;
  }
  #main-header #top-menu li#menu-item-149.mega-open > ul.sub-menu,
  #main-header #top-menu li#menu-item-150.mega-open > ul.sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity .2s ease, transform .2s ease, visibility 0s 0s !important;
  }
}
@media (max-width: 980px) {
  #main-header .menu-item-149 > .sub-menu,
  #main-header .menu-item-150 > .sub-menu {
    position: static;
    width: auto;
    margin-left: 0;
    translate: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    display: none;
  }
}
::-webkit-scrollbar-thumb:hover { background: var(--tim-slate); }

/* =========================================================
   Esthétique hériter des méga-bars + header + hero
   ========================================================= */
@media (min-width: 981px) {
  /* Items : letter-spacing + pill de survol (Boutique = majuscules, Marques = noms) */
  #main-header #top-menu li#menu-item-149 > ul.sub-menu a,
  #main-header #top-menu li#menu-item-150 > ul.sub-menu a {
    border-radius: 999px !important;
    white-space: nowrap;
  }
  #main-header #top-menu li#menu-item-149 > ul.sub-menu a {
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: 10.5px;
  }
  #main-header #top-menu li#menu-item-150 > ul.sub-menu a {
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: 10.5px;
  }
  #main-header #top-menu li#menu-item-149 > ul.sub-menu a:hover,
  #main-header #top-menu li#menu-item-150 > ul.sub-menu a:hover {
    background: rgba(255,121,0,.16) !important;
    color: #fff !important;
  }
  /* Étiquette de section, 1er élément du groupe centré */
  #main-header #top-menu li#menu-item-149 > ul.sub-menu li.cmc-mega-kicker,
  #main-header #top-menu li#menu-item-150 > ul.sub-menu li.cmc-mega-kicker {
/* =========================================================
   NOS CATÉGORIES — cartes uniformisées
   ========================================================= */
.tim-cat-grid { align-items: stretch !important; }
.tim-cat-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 340px !important;
  text-align: center !important;
}
.tim-cat-card img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border-radius: 14px !important;
}
.tim-cat-card h4 { margin-top: auto !important; }
.tim-cat-card > span { margin-top: 8px !important; }
@media (min-width:1281px) {
  .tim-cat-grid .tim-cat-card { width: calc(25% - 15px) !important; }
}
  /* Une seule ligne, groupe centré */
  #main-header #top-menu li#menu-item-149 > ul.sub-menu {
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  #main-header #top-menu li#menu-item-150 > ul.sub-menu {
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #main-header #top-menu li#menu-item-149 > ul.sub-menu li { margin: 0; }
  #main-header #top-menu li#menu-item-150 > ul.sub-menu li { margin-left: 0; margin-right: 0; }
  #main-header #top-menu li#menu-item-150 > ul.sub-menu a { padding: 5px 4px !important; }
  /* Dégradé de fond + liseré doré inférieur */
  #main-header #top-menu li#menu-item-149 > ul.sub-menu,
  #main-header #top-menu li#menu-item-150 > ul.sub-menu {
    background: linear-gradient(180deg, rgba(20, 22, 28, .985), rgba(26, 30, 40, .96)) !important;
    border-bottom: 1px solid rgba(255, 121, 0, .32) !important;
  }
  /* Chevron renforcé */
  #main-header #top-menu li#menu-item-149 > a::after,
  #main-header #top-menu li#menu-item-150 > a::after {
    font-size: 15px;
    opacity: .8;
  }
  #main-header #top-menu li#menu-item-149.mega-open > a::after,
  #main-header #top-menu li#menu-item-149:hover > a::after,
  #main-header #top-menu li#menu-item-150.mega-open > a::after,
  #main-header #top-menu li#menu-item-150:hover > a::after { opacity: 1; }
}

/* Menu et sous-menus en majuscules */
#main-header #top-menu > li > a,
#main-header #top-menu li ul.sub-menu a { text-transform: uppercase; }

/* Ombre du header au scroll */
#main-header.tim-header-scrolled {
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .55) !important;
}

/* Panier et recherche retirés du header */
#main-header .et-cart-info,
#main-header #et_top_search,
#main-header .et_search_outer { display: none !important; }

/* Supprime le bouton "Rechercher" de la barre d'admin WordPress (connecté) */
#wpadminbar .adminbar-button,
#wpadminbar #adminbar-search,
#wpadminbar .adminbar-search,
#wpadminbar #wp-admin-bar-search { display: none !important; }

@media (min-width: 981px) {
  /* Header plein écran : groupe logo + menu centré, logo à gauche d'Accueil */
  #main-header {
    height: auto !important;
    min-height: 90px !important;
    box-sizing: border-box;
  }
  #main-header .et_menu_container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 44px !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #main-header .logo_container {
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 0 0 !important;
  }
  #main-header #logo { margin: 0 !important; }
  #main-header #et-top-navigation {
    position: static !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    flex: none !important;
    margin: 0 0 0 24px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  #main-header #et-top-navigation #top-menu-nav {
    position: static !important;
    float: none !important;
    display: flex;
  }
  #main-header #et-top-navigation #top-menu-nav #top-menu {
    float: none !important;
    display: flex;
    align-items: center;
    margin: 6px 0 0 !important;
  }
  /* panier et loupe retirés du header */
  #main-header .et-cart-info,
  #main-header #et_top_search { display: none !important; }
}

/* Badge NOUVEAU + liens carrousel (hero Onduline) */
.tim-hero .cmc-gal-new {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  background: linear-gradient(135deg, var(--c-action-2), var(--c-action));
  color: #14161c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  pointer-events: none;
}
.tim-hero .cmc-gal-item { display: block; text-decoration: none; }
.tim-hero .cmc-gal-item.active { pointer-events: auto; cursor: pointer; }
.tim-hero .cmc-gal-item.active:hover img { filter: brightness(.94) saturate(1.1); }
.tim-hero .cmc-gal-item img { transition: filter .35s ease; }

/* ==================================================================
   RECHERCHE PLEIN ÉCRAN
   ================================================================== */
.cmc-search-trigger {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 121, 0, .45);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .25s ease;
}
.cmc-search-trigger svg {
  width: 18px;
  height: 18px;
  display: block;
  flex: none;
  fill: none;
  stroke: var(--c-action);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.cmc-search-trigger:hover {
  border-color: var(--c-action);
  background: rgba(255, 121, 0, .14);
  box-shadow: 0 0 0 8px rgba(255, 121, 0, .08);
}
.cmc-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 20, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.cmc-search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease;
}
.cmc-s-inner {
  width: min(760px, 92vw);
  text-align: center;
  padding: 24px;
  transform: translateY(16px);
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease;
}
.cmc-search-overlay.is-open .cmc-s-inner {
  transform: none;
  opacity: 1;
}
.cmc-s-kicker {
  margin: 0 0 6px;
  letter-spacing: .35em;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-action);
  text-transform: uppercase;
}
.cmc-s-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  padding: 8px 10px 8px 22px;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.cmc-s-form:focus-within {
  border-color: rgba(255, 121, 0, .75);
  background: rgba(255, 255, 255, .09);
  box-shadow: 0 0 0 9px rgba(255, 121, 0, .07), 0 24px 60px rgba(0, 0, 0, .45);
}
.cmc-s-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 300;
  letter-spacing: .02em;
  padding: 12px 8px;
  height: auto;
}
.cmc-s-input::placeholder {
  color: rgba(255, 255, 255, .35);
}
.cmc-s-submit {
  flex: none;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-action-2), var(--c-action));
  color: #10141c;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 0 24px;
  min-height: 52px;
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
}
.cmc-s-submit:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.cmc-s-results {
  max-height: 46vh;
  overflow-y: auto;
  margin-top: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(13, 17, 25, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  text-align: left;
}
.cmc-s-list { padding: 4px; }
.cmc-s-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #e8ebf1;
  text-decoration: none;
  transition: background .15s ease;
}
.cmc-s-row + .cmc-s-row { border-top: 1px solid rgba(255, 255, 255, .06); }
.cmc-s-row:hover,
.cmc-s-row.is-active { background: rgba(255, 121, 0, .12); }
.cmc-s-thumb {
  flex: none;
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
}
.cmc-s-noimg {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(255, 121, 0, .25), rgba(255, 121, 0, .08));
}
.cmc-s-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cmc-s-title { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.cmc-s-title mark {
  background: rgba(255, 121, 0, .4);
  color: #fff;
  border-radius: 3px;
  padding: 0 2px;
}
.cmc-s-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 10.5px; }
.cmc-s-brand {
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-action);
}
.cmc-s-cat {
  color: rgba(255, 255, 255, .45);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cmc-s-price { color: var(--c-action-2); font-weight: 700; font-size: 12px; }
.cmc-s-arrow {
  flex: none;
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, .35);
  transition: transform .2s ease, color .2s ease;
}
.cmc-s-row:hover .cmc-s-arrow,
.cmc-s-row.is-active .cmc-s-arrow { transform: translateX(3px); color: var(--c-action); }
.cmc-s-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: var(--c-action);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  transition: background .15s ease;
}
.cmc-s-all:hover { background: rgba(255, 121, 0, .1); }
.cmc-s-all svg { width: 14px; height: 14px; }
.cmc-s-empty {
  padding: 22px 16px;
  text-align: center;
  color: rgba(255, 255, 255, .5);
  font-size: 14px;
}
.cmc-s-loading {
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
}
.cmc-s-bar {
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--c-action), transparent);
  animation: cmcSearchShimmer 1.1s ease-in-out infinite;
}
@keyframes cmcSearchShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.cmc-s-results::-webkit-scrollbar { width: 8px; }
.cmc-s-results::-webkit-scrollbar-thumb {
  background: rgba(255, 121, 0, .35);
  border-radius: 8px;
}
.cmc-s-suggest {
  margin-top: 28px;
}
.cmc-s-suggest-label {
  display: block;
  margin-bottom: 12px;
  letter-spacing: .28em;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .4);
  text-transform: uppercase;
}
.cmc-s-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.cmc-s-chip {
  border: 1px solid rgba(255, 255, 255, .2);
  color: #e8ebf1;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 999px;
  transition: all .22s ease;
}
.cmc-s-chip:hover {
  border-color: var(--c-action);
  color: var(--c-action);
  background: rgba(255, 121, 0, .08);
}
.cmc-s-close {
  position: absolute;
  top: 26px;
  right: 32px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
}
.cmc-s-close:hover {
  border-color: var(--c-action);
  color: var(--c-action);
  transform: rotate(90deg);
}
body.cmc-s-locked {
  overflow: hidden;
}
.cmc-s-hist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 2px;
}
.cmc-s-clearhist {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .5);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color .2s ease;
}
.cmc-s-clearhist:hover { color: var(--c-action); }
.cmc-s-clock {
  flex: none;
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, .4);
}
.cmc-s-hist .cmc-s-title { flex: 1; }
.cmc-s-sku {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .6);
  font-family: Consolas, Menlo, monospace;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 4px;
  padding: 1px 6px;
}
.cmc-s-results { scroll-margin-top: 20px; }

/* Focus visible (accessibilité) */
:focus-visible {
  outline: 2px solid var(--c-action) !important;
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
.cmc-s-row:focus-visible { border-radius: 6px; }

/* ==================================================================
   MÉGA « MARQUES » VISUEL (grille de marques, sans logos)
   ================================================================== */
@media (min-width: 981px) {
  #main-header #top-menu li#menu-item-150 > ul.sub-menu.cmc-mega-brands-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 28px !important;
    justify-content: stretch !important;
    padding: 6px 28px 18px 28px !important;
  }
  #main-header #top-menu li#menu-item-150 > ul.sub-menu.cmc-mega-brands-grid > li.cmc-mega-brand {
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  #main-header #top-menu li#menu-item-150 > ul.sub-menu.cmc-mega-brands-grid > li.cmc-mega-kicker {
    grid-column: 1 / -1;
    border-right: 0;
    padding-left: 6px;
  }
  #main-header #top-menu li#menu-item-150 > ul.sub-menu.cmc-mega-brands-grid > li.cmc-mega-brand a {
    display: block;
    width: 100%;
    padding: 11px 8px !important;
    white-space: normal !important;
    line-height: 1.25;
    font-weight: 600;
    border-radius: 6px;
    transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
  }
  #main-header #top-menu li#menu-item-150 > ul.sub-menu.cmc-mega-brands-grid > li.cmc-mega-brand:hover a {
    background-color: rgba(255, 121, 0, .16) !important;
    padding-left: 14px !important;
  }
}
@media (max-width: 980px) {
  .cmc-search-trigger { right: 20px; }
  .cmc-s-form { flex-wrap: wrap; padding: 10px 14px; }
  .cmc-s-submit { width: 100%; }
  .cmc-s-close { top: 18px; right: 18px; }
}

/* ==================================================================
   B2B — DEMANDE DE DEVIS
   ================================================================== */
button.tim-dv-add {
  cursor: pointer;
  font-family: inherit;
}
.tim-product-body .tim-dv-add {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 20px;
  border: 1px solid rgba(255, 121, 0, .5);
  border-radius: var(--btn-radius, 10px);
  background: rgba(255, 121, 0, .1);
  color: var(--tim-accent, var(--c-action));
  font-family: var(--font-heading, inherit);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-align: center;
  transition: all .25s ease;
}
.tim-product-body .tim-dv-add:hover {
  background: var(--btn-gold, var(--c-action));
  color: var(--tim-dark, #10141c);
  transform: translateY(-1px);
}
button.tim-dv-single {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  padding: 16px 34px;
  border-radius: var(--btn-radius, 10px);
  background: var(--bp-c, var(--btn-gold));
  color: var(--bp-c-text, var(--tim-dark));
  font-family: var(--font-heading, inherit);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  box-shadow: 0 14px 36px -8px color-mix(in srgb, var(--bp-c, var(--btn-gold)) 55%, transparent);
  transition: all .25s ease;
}
button.tim-dv-single:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: var(--bp-c-text, var(--tim-dark));
}
.tim-btn-view.tim-dv-add { text-transform: capitalize; }
.cmc-dv-fab {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: #F87503;
  color: #ffffff;
  font-family: var(--font-heading, inherit);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 16px 38px -14px rgba(248, 117, 3, .75), inset 0 2px 0 0 rgba(255, 255, 255, .25), inset 0 -3px 6px -2px rgba(4, 6, 12, .25);
  transition: all .25s ease;
}
.cmc-dv-fab:hover { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(248, 117, 3, .55), inset 0 2px 0 0 rgba(255, 255, 255, .25), inset 0 -3px 6px -2px rgba(4, 6, 12, .25); }
.cmc-dv-fab-empty { background: #565c68; color: rgba(255, 255, 255, .85); box-shadow: 0 18px 40px rgba(0, 0, 0, .4), inset 0 1px 0 0 rgba(255, 255, 255, .1); }
.cmc-dv-fab-empty .cmc-dv-fab-txt { color: rgba(255, 255, 255, .55); }
.cmc-dv-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #10141c;
  color: #F87503;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .14), 0 2px 6px rgba(0, 0, 0, .35);
}
.cmc-dv-bump { animation: cmcDvBump .4s ease; }
@keyframes cmcDvBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.cmc-dv-overlay {
  position: fixed;
  inset: 0;
  z-index: 999990;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 20, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.cmc-dv-overlay[hidden] { display: none; }
.cmc-dv-panel {
  position: relative;
  width: min(680px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: rgba(16, 20, 28, .96);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
}
.cmc-dv-sub {
  margin: 6px 0 18px;
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
}
.cmc-dv-list { margin-bottom: 18px; }
.cmc-dv-list-inner {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  overflow: hidden;
}
.cmc-dv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.cmc-dv-row + .cmc-dv-row { border-top: 1px solid rgba(255, 255, 255, .07); }
.cmc-dv-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
.cmc-dv-name { font-size: 14px; font-weight: 600; color: #e8ebf1; }
.cmc-dv-qty {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  padding: 4px 6px;
}
.cmc-dv-qty button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.cmc-dv-qty button:hover { background: rgba(255, 121, 0, .3); color: var(--c-action-2); }
.cmc-dv-qty-val { min-width: 22px; text-align: center; font-weight: 700; }
.cmc-dv-del {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, .45);
  font-size: 18px;
  cursor: pointer;
  transition: all .2s ease;
}
.cmc-dv-del:hover { color: #fff; background: rgba(255, 80, 80, .18); }
.cmc-dv-total {
  margin: 12px 4px 0;
  font-size: 12.5px;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .55);
  text-transform: uppercase;
}
.cmc-dv-form .cmc-dv-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.cmc-dv-form input,
.cmc-dv-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  padding: 12px 14px;
  outline: 0;
  transition: border-color .25s ease;
}
.cmc-dv-form input:focus,
.cmc-dv-form textarea:focus { border-color: rgba(255, 121, 0, .7); }
.cmc-dv-form input::placeholder,
.cmc-dv-form textarea::placeholder { color: rgba(255, 255, 255, .35); }
.cmc-dv-form textarea {
  margin-top: 10px;
  resize: vertical;
  font-family: inherit;
}
.cmc-dv-form .cmc-s-submit { margin-top: 14px; }
.cmc-dv-status {
  margin: 12px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-action-2);
}
@media (max-width: 980px) {
  .cmc-dv-fab { right: 14px; bottom: 14px; padding: 12px 16px; font-size: 13px; }
  .cmc-dv-panel { padding: 24px 18px; }
}

/* ==================================================================
   CHATBOT AUTOMATIQUE
   ================================================================== */
.cmc-chat {
  position: fixed;
  left: 26px;
  bottom: 26px;
  z-index: 99998;
}
.cmc-chat-fab {
  position: relative;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255, 121, 0, .5);
  border-radius: 50%;
  background: linear-gradient(135deg, #161b26, #10141c);
  color: var(--c-action);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  transition: all .25s ease;
}
.cmc-chat-fab:hover { transform: translateY(-2px); border-color: var(--c-action); box-shadow: 0 22px 48px rgba(0, 0, 0, .55); }
.cmc-chat-fab-ico { display: none; }
.cmc-chat-fab-close { display: none; }
.cmc-chat.is-open .cmc-chat-fab-open { display: none; }
.cmc-chat.is-open .cmc-chat-fab-close { display: block; }
.cmc-chat-fab::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3ddc6f;
  border: 2px solid #10141c;
  animation: cmcChatPulse 2.4s ease infinite;
}
@keyframes cmcChatPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 220, 111, .55); }
  50% { box-shadow: 0 0 0 9px rgba(61, 220, 111, 0); }
}
.cmc-chat.is-ready .cmc-chat-fab { animation: cmcChatPop .5s ease; }
@keyframes cmcChatPop {
  0% { transform: scale(0); }
  65% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.cmc-chat-win {
  position: absolute;
  bottom: 76px;
  left: 0;
  width: 380px;
  max-width: 92vw;
  max-height: min(560px, calc(100vh - 150px));
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: rgba(16, 20, 28, .97);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.cmc-chat-win[hidden] { display: none; }
.cmc-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(135deg, rgba(255, 121, 0, .14), rgba(255, 121, 0, .03));
}
.cmc-chat-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-action-2), var(--c-action));
  color: #10141c;
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmc-chat-name { font-size: 14.5px; font-weight: 700; color: #fff; margin: 0; }
.cmc-chat-online {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .55);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cmc-chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ddc6f;
}
.cmc-chat-close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
}
.cmc-chat-close:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.cmc-chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cmc-chat-b {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  word-wrap: break-word;
}
.cmc-chat-b p { margin: 0; }
.cmc-chat-b p + p { margin-top: 6px; }
.cmc-chat-b.bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, .08);
  color: #e8ebf1;
  border-bottom-left-radius: 4px;
}
.cmc-chat-b.me {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--c-action-2), var(--c-action));
  color: #10141c;
  font-weight: 600;
  border-bottom-right-radius: 4px;
}
.cmc-chat-typing { display: flex; gap: 5px; align-items: center; padding: 13px 16px; }
.cmc-chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  animation: cmcChatDot 1.2s infinite ease-in-out;
}
.cmc-chat-typing span:nth-child(2) { animation-delay: .18s; }
.cmc-chat-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes cmcChatDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-5px); opacity: 1; }
}
.cmc-chat-plink {
  display: block;
  margin-top: 6px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 121, 0, .4);
  border-radius: 10px;
  color: var(--c-action-2);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: all .2s ease;
}
.cmc-chat-plink:hover { background: rgba(255, 121, 0, .12); border-color: var(--c-action); }
.cmc-chat-chip:hover { background: rgba(255, 121, 0, .2); border-color: var(--c-action); }
.cmc-chat-form {
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.cmc-chat-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  color: #fff;
  font-size: 13.5px;
  padding: 11px 14px;
  outline: none;
  transition: border-color .25s ease;
}
.cmc-chat-input:focus { border-color: rgba(255, 121, 0, .7); }
.cmc-chat-input::placeholder { color: rgba(255, 255, 255, .35); }
.cmc-chat-send {
  flex: none;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-action-2), var(--c-action));
  color: #10141c;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
}
.cmc-chat-send:hover { transform: translateY(-1px); }
@media (max-width: 980px) {
  .cmc-chat { left: 14px; bottom: 14px; }
  .cmc-chat-fab { width: 56px; height: 56px; }
  .cmc-chat-win { bottom: 70px; width: 92vw; }
}

/* ---- Chat : mémoire « Mes infos » ---- */
.cmc-chat-mem { padding: 2px 16px 10px; text-align: right; }
.cmc-chat-mem-opt {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .45);
  font-size: 11px;
  padding: 2px 4px;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.cmc-chat-mem-opt:hover { color: var(--c-action-2); }
.cmc-chat-mem-box {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
}
.cmc-chat-mem-box[hidden] { display: none; }
.cmc-chat-mem-txt { margin: 0 0 8px; font-size: 11.5px; color: rgba(255, 255, 255, .55); }
.cmc-chat-mem-fields { display: flex; flex-direction: column; gap: 6px; }
.cmc-chat-mem-fields input {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  color: #fff;
  font-size: 12.5px;
  padding: 8px 10px;
  outline: none;
}
.cmc-chat-mem-fields input:focus { border-color: rgba(255, 121, 0, .7); }
.cmc-chat-mem-fields input::placeholder { color: rgba(255, 255, 255, .3); }
.cmc-chat-mem-actions { display: flex; gap: 6px; margin-top: 8px; }
.cmc-chat-mem-actions button {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}
.cmc-chat-mem-save {
  border: 0;
  background: linear-gradient(135deg, var(--c-action-2), var(--c-action));
  color: #10141c;
}
.cmc-chat-mem-save:hover { transform: translateY(-1px); }
.cmc-chat-mem-clear {
  border: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  color: rgba(255, 255, 255, .7);
}
.cmc-chat-mem-clear:hover { background: rgba(255, 255, 255, .08); }

/* ==========================================================================
   BRAND PAGE V2 — structure complète (hero couleur, stats, catalogue, CTA)
   ========================================================================== */

.bp-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- HERO ---------- */
.bp-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--tim-dark-alt) 0%, var(--tim-dark) 45%, var(--tim-navy) 100%);
  color: #fff;
  padding: 56px 0 76px;
}
.bp-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.bp-orbe {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
}
.bp-orbe-1 {
  width: 460px; height: 460px;
  top: -160px; right: -80px;
  background: color-mix(in srgb, var(--bp-c) 55%, transparent);
}
.bp-orbe-2 {
  width: 380px; height: 380px;
  bottom: -180px; left: -60px;
  background: color-mix(in srgb, var(--bp-c) 35%, var(--bp-c2) 20%);
  opacity: .35;
}
.bp-hero .bp-shell { position: relative; z-index: 2; }

.bp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 42px;
}
.bp-crumbs a { color: rgba(255,255,255,.62); text-decoration: none; transition: color .2s ease; }
.bp-crumbs a:hover { color: #fff; }
.bp-crumb-sep { color: rgba(255,255,255,.25); }
.bp-crumb-current { color: color-mix(in srgb, var(--bp-c) 45%, #fff); font-weight: 700; }

.bp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: var(--btn-radius);
  background: color-mix(in srgb, var(--bp-c) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--bp-c) 55%, transparent);
  color: color-mix(in srgb, var(--bp-c) 45%, #fff);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.bp-kicker::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bp-c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bp-c) 35%, transparent);
}
.bp-kicker-light {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
  color: color-mix(in srgb, var(--bp-c) 55%, #fff);
}
.bp-kicker-light::before { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.22); }

.bp-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.4rem, 5.2vw, 4rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  color: #fff !important;
  margin: 0 0 18px !important;
  letter-spacing: -.01em;
}
.bp-desc {
  font-size: 1.12rem;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
  max-width: 620px;
  margin-bottom: 30px;
}

.bp-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.bp-actions-mt { margin-top: 26px; }
.bp-actions-center { justify-content: center; }

.bp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.bp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--btn-radius);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.82);
  font-size: 12.5px;
  backdrop-filter: blur(6px);
}
.bp-badge b { color: #fff; font-family: var(--font-heading); font-size: 14px; }

.bp-logo-card {
  position: relative;
  z-index: 2;
  width: 290px;
  max-width: 90%;
  aspect-ratio: 1 / 1;
  border-radius: 32px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--bp-c) 30%, #fff) 0%, #fff 55%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: rotate(-2deg);
  transition: transform .4s ease, box-shadow .4s ease;
}
.bp-logo-card:hover { transform: rotate(0deg) translateY(-6px); }
.bp-logo-img { max-width: 78%; max-height: 78%; object-fit: contain; }
/* Logos sur fond blanc : centre de la carte 100% blanc, bords transparents */
.bp-logo-card.lg-panel {
  background: radial-gradient(ellipse 62% 62% at 50% 50%, #fff 0%, #fff 42%, rgba(255,255,255,.78) 60%, rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.bp-mono {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 4.4rem);
  color: var(--tim-dark);
  background: linear-gradient(135deg, var(--bp-c), var(--bp-c2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bp-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--bp-c) 45%, transparent);
  animation: bp-spin 24s linear infinite;
}
.bp-ring-1 { width: 360px; height: 360px; }
.bp-ring-2 { width: 460px; height: 460px; border-color: rgba(255,255,255,.12); animation-direction: reverse; animation-duration: 36s; }
@keyframes bp-spin { to { transform: rotate(360deg); } }

/* ---------- STATS (glassbox premium) ---------- */
.bp-stats {
  position: relative;
  background: var(--c-bg);
  padding: 44px 0 96px;
  overflow: hidden;
}
.bp-stats::before {
  content: "";
  position: absolute;
  inset: -60% -10% auto auto;
  width: 46%;
  height: 160%;
  background: radial-gradient(60% 60% at 60% 40%, rgba(255,121,0,.16), transparent 70%);
  pointer-events: none;
}
.bp-stats::after {
  content: "";
  position: absolute;
  inset: auto auto -40% -10%;
  width: 50%;
  height: 140%;
  background: radial-gradient(55% 55% at 40% 55%, rgba(255,121,0,.10), transparent 68%);
  pointer-events: none;
}
.bp-stats-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.bp-stat {
  position: relative;
  background: rgba(255, 255, 255, .02);
  backdrop-filter: blur(12px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(12px) saturate(var(--saturation));
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--glass-radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 2px 2px 1px 0 rgba(255, 255, 255, .06),
    inset -2px -2px 2px 0 rgba(255, 255, 255, .04),
    0 30px 60px -30px rgba(0, 0, 0, .6);
  padding: 28px 22px;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease, background .5s ease;
}
.bp-stat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,.06), transparent 42%);
  pointer-events: none;
}
.bp-stat:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 36px 80px -32px rgba(0, 0, 0, .72);
}
.bp-stat b {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--bp-c);
  line-height: 1.1;
  margin-bottom: 6px;
}
.bp-stat span { font-size: .86rem; color: rgba(255,255,255,.75); }

/* ---------- UNIVERS MARQUE ---------- */
/* ---------- L'UNIVERS DE LA MARQUE (v2 futuristic) ---------- */
.bp-h2 {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.7rem, 3vw, 2.3rem) !important;
  font-weight: 800 !important;
  color: var(--tim-text-dark) !important;
  line-height: 1.15 !important;
  margin: 0 0 18px !important;
}
.bp-feats {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 13px;
}
.bp-feats li {
  position: relative;
  padding-left: 30px;
  font-size: .97rem;
  line-height: 1.5;
}
.bp-universe {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 560px at 88% -10%, color-mix(in srgb, var(--bp-c) 16%, transparent), transparent 62%),
    radial-gradient(900px 520px at -6% 116%, color-mix(in srgb, var(--bp-c) 10%, transparent), transparent 60%),
    var(--tim-dark-alt);
  padding: 44px 0 96px;
}
.bp-universe-orb {
  position: absolute;
  top: -180px; right: -140px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--bp-c) 42%, transparent), transparent 70%);
  opacity: .5;
  filter: blur(12px);
  pointer-events: none;
  animation: bpOrbFloat 9s ease-in-out infinite;
}
@keyframes bpOrbFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-24px,18px) scale(1.06); } }
.bp-universe::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 42%, #000 30%, transparent 100%);
          mask-image: radial-gradient(80% 70% at 50% 42%, #000 30%, transparent 100%);
  pointer-events: none;
}
.bp-universe-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
}
.bp-universe .bp-h2 { color: #fff !important; }
.bp-universe-copy > p { color: rgba(255,255,255,.78); }
.bp-universe-copy .el-kicker {
  color: color-mix(in srgb, var(--bp-c) 70%, #fff);
  background: linear-gradient(90deg, color-mix(in srgb, var(--bp-c) 22%, transparent), transparent);
  border-color: color-mix(in srgb, var(--bp-c) 38%, transparent);
}
.bp-universe-copy .el-kicker::before {
  background: var(--bp-c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bp-c) 24%, transparent);
}
.bp-feats li { color: rgba(255,255,255,.9); }
.bp-feats li::before {
  background: linear-gradient(135deg, var(--bp-c), color-mix(in srgb, var(--bp-c) 40%, #fff));
  color: var(--tim-dark);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bp-c) 22%, transparent);
}
.bp-actions .el-btn-ghost { color: rgba(255,255,255,.92) !important; border-color: rgba(255,255,255,.4); }

/* — boutons de la page marque : palette logo complète (--bp-c / --bp-c2 / --bp-c-text) — */
.bp-hero .el-btn,
.bp-universe .el-btn,
.bp-cta .el-btn {
  display: inline-block;
  padding: 17px 36px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  font-family: var(--font-body);
  text-decoration: none !important;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.bp-hero .el-btn::after,
.bp-universe .el-btn::after,
.bp-cta .el-btn::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); transition: left .55s ease; }
.bp-hero .el-btn:hover::after,
.bp-universe .el-btn:hover::after,
.bp-cta .el-btn:hover::after { left: 130%; }
.bp-hero .el-btn-gold,
.bp-universe .el-btn-gold,
.bp-cta .el-btn-gold {
  background: linear-gradient(120deg, var(--bp-c) 0%, var(--bp-c2) 100%);
  color: var(--bp-c-text) !important;
  box-shadow: 0 16px 38px -14px color-mix(in srgb, var(--bp-c) 75%, transparent);
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.bp-hero .el-btn-gold:hover,
.bp-universe .el-btn-gold:hover,
.bp-cta .el-btn-gold:hover {
  transform: translateY(-4px) scale(1.03);
  color: var(--bp-c-text) !important;
  box-shadow: 0 24px 52px -16px color-mix(in srgb, var(--bp-c) 90%, transparent);
}
.bp-hero .el-btn-gold::after,
.bp-universe .el-btn-gold::after,
.bp-cta .el-btn-gold::after { background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent); }
.bp-hero .el-btn-ghost:hover,
.bp-universe .el-btn-ghost:hover,
.bp-cta .el-btn-ghost:hover { background: var(--bp-c); border-color: var(--bp-c); color: var(--bp-c-text) !important; }

/* — page SJ : boutons hero dans la palette — */
.sjb-hero .el-btn-gold {
  background: linear-gradient(120deg, var(--bp-c) 0%, var(--bp-c2) 100%);
  color: var(--bp-c-text) !important;
  box-shadow: 0 16px 38px -14px color-mix(in srgb, var(--bp-c) 75%, transparent);
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.sjb-hero .el-btn-gold:hover {
  transform: translateY(-4px) scale(1.03);
  color: var(--bp-c-text) !important;
  box-shadow: 0 24px 52px -16px color-mix(in srgb, var(--bp-c) 90%, transparent);
}
.sjb-hero .el-btn-gold::after { background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent); }
.sjb-hero .el-btn-ghost:hover { background: var(--bp-c); border-color: var(--bp-c); color: var(--bp-c-text) !important; }
.sjb-hero .el-btn-ghost {
  background: rgba(255,255,255,.12);
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -16px rgba(0,0,0,.4);
}
.sjb-hero .el-btn {
  display: inline-block;
  padding: 17px 36px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  font-family: var(--font-body);
  text-decoration: none !important;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

/* — carte vedette — */
.bp-universe-card {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: linear-gradient(160deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.028) 42%, rgba(0,0,0,.18) 100%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 50px 100px -44px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.bp-uc-glow {
  position: absolute;
  top: -70px; right: -70px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--bp-c) 55%, transparent), transparent 70%);
  opacity: .5;
  filter: blur(6px);
  pointer-events: none;
}
.bp-uc-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 250px;
  padding: 16px 10px 0;
}
.bp-uc-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 300px; height: 300px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  border: 1px dashed color-mix(in srgb, var(--bp-c) 40%, transparent);
  animation: bpSpin 30s linear infinite;
  pointer-events: none;
}
.bp-uc-ring-2 {
  width: 360px; height: 360px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--bp-c) 18%, transparent);
  animation-direction: reverse;
  animation-duration: 40s;
}
@keyframes bpSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.bp-uc-spot {
  position: relative;
  z-index: 2;
  max-width: 82%;
  max-height: 250px;
  border-radius: 18px;
  filter: drop-shadow(0 34px 34px rgba(0,0,0,.55)) drop-shadow(0 0 26px color-mix(in srgb, var(--bp-c) 30%, transparent));
  animation: bpFloat 5.4s ease-in-out infinite;
}
@keyframes bpFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(-1.2deg); } }
.bp-uc-body {
  position: relative;
  z-index: 3;
  background: rgba(6,8,14,.42);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.bp-uc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.bp-uc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bp-c) 62%, #fff);
}
.bp-uc-pill {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--bp-c), var(--bp-c2));
  color: var(--bp-c-text);
  box-shadow: 0 8px 22px -10px var(--bp-c);
}
.bp-uc-name {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
}
.bp-uc-count {
  font-size: .88rem;
  color: rgba(255,255,255,.68);
  margin-bottom: 6px;
}
/* CTA magnifique */
.bp-uc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 14px 24px 14px 28px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--bp-c-text) !important;
  text-decoration: none !important;
  background: linear-gradient(120deg, var(--bp-c) 0%, var(--bp-c2) 60%, var(--bp-c) 100%);
  background-size: 220% 100%;
  background-position: 0% 0;
  box-shadow: 0 18px 40px -16px var(--bp-c), inset 0 1px 0 rgba(255,255,255,.5);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background-position .5s ease;
}
.bp-uc-btn::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 42%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.bp-uc-btn:hover {
  transform: translateY(-3px) scale(1.02);
  background-position: 100% 0;
  box-shadow: 0 26px 52px -16px var(--bp-c), inset 0 1px 0 rgba(255,255,255,.5);
}
.bp-uc-btn:hover::before { left: 130%; }
.bp-uc-btn i {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 15px;
  background: rgba(61,40,23,.18);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.bp-uc-btn:hover i { transform: rotate(45deg) scale(1.1); }

/* ---------- CATALOGUE ---------- */
.bp-catalog { background: var(--tim-white); padding: 96px 0 110px; }
.bp-catalog .bp-h2,
.bp-catalog-head .bp-h2 { color: var(--tim-dark, #10141c) !important; }
.bp-catalog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  margin-bottom: 44px;
}
.bp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.bp-chip {
  padding: 9px 18px;
  border-radius: var(--btn-radius);
  border: 1.5px solid var(--tim-border);
  background: color-mix(in srgb, var(--c-bg) 92%, var(--c-light));
  -webkit-backdrop-filter: blur(6px) saturate(var(--saturation));
  backdrop-filter: blur(6px) saturate(var(--saturation));
  color: var(--tim-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
}
.bp-chip:hover { border-color: var(--bp-c); color: var(--bp-c); transform: translateY(-2px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-light) 40%, transparent); }
.bp-chip.is-active {
  background: linear-gradient(135deg, var(--bp-c), var(--bp-c2));
  border-color: transparent;
  color: var(--bp-c-text);
  box-shadow:
    0 14px 30px -14px var(--bp-c),
    inset 2px 2px 1px 0 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 45%), transparent),
    inset -2px -2px 2px 0 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 35%), transparent);
}
.bp-empty {
  text-align: center;
  color: var(--tim-slate);
  font-size: 1.05rem;
  padding: 40px 0;
}
.bp-pagination { margin-top: 48px; }

/* ---------- CTA ---------- */
.bp-cta {
  background: linear-gradient(135deg, var(--tim-dark-alt) 0%, color-mix(in srgb, var(--bp-c) 30%, #000) 55%, var(--tim-dark) 100%);
  color: #fff;
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.bp-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(420px 260px at 50% 40%, #000 20%, transparent 90%);
  -webkit-mask-image: radial-gradient(420px 260px at 50% 40%, #000 20%, transparent 90%);
  pointer-events: none;
}
.bp-cta-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.bp-cta-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.12 !important;
  margin: 0 0 16px !important;
}
.bp-cta-text {
  color: rgba(255,255,255,.8);
  font-size: 1.06rem;
  line-height: 1.65;
  margin: 0 0 30px;
}
.bp-cta .bp-kicker { justify-content: center; }

/* ---------- AUTRES MARQUES ---------- */
.bp-others { background: var(--tim-light); padding: 90px 0 100px; }
.bp-others-head { margin-bottom: 38px; }
.bp-others-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.bp-other {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  min-height: 172px;
  padding: 24px 16px;
  background: color-mix(in srgb, var(--c-bg) 92%, var(--c-light));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  backdrop-filter: blur(8px) saturate(var(--saturation));
  border: 1px solid var(--tim-border);
  border-radius: var(--glass-radius-sm);
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.bp-other::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--bp-c) 22%, transparent));
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.bp-other:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--bp-c) 55%, transparent);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.35);
}
.bp-other:hover::after { opacity: 1; }
.bp-other-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 88px;              /* espace réservé : pas de saut de layout au chargement */
  padding: 8px 34px;
}
.bp-other-logo::before {
  content: "";
  position: absolute;
  inset: 6px 34px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.18);
}
.bp-other-logo > img,
.bp-other-logo > .bp-other-mono {
  position: relative;
  z-index: 1;
}
.bp-other img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: saturate(.85) contrast(1.02);
  transition: filter .3s ease, transform .3s ease;
}
.bp-other:hover .bp-other img { filter: saturate(1) contrast(1.05); transform: scale(1.04); }
.bp-other-mono {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--bp-c), color-mix(in srgb, var(--bp-c) 45%, #000));
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--bp-c) 60%, transparent);
}
.bp-other b { font-family: var(--font-heading); font-size: 15px; color: var(--tim-text-dark); }
.bp-other span { font-size: .8rem; color: var(--tim-slate); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .bp-stat.bp-stat, .bp-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .bp-universe-grid { grid-template-columns: 1fr; gap: 36px; }
  .bp-others-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .bp-others-strip { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .bp-hero { padding: 40px 0 60px; }
  .bp-logo-card { width: 220px; }
  .bp-ring-1 { width: 260px; height: 260px; }
  .bp-ring-2 { width: 330px; height: 330px; }
  .bp-stats { padding: 40px 0 48px; }
  .bp-badges { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   PAGE MARQUE : SAFETY JOGGER (design dédié, token --bp-c = couleur marque)
   ============================================================================ */
.sjb-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--bp-c) 22%, transparent), transparent 60%), var(--tim-dark);
  color: #fff;
  padding: 34px 0 96px;
}
.sjb-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.sjb-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bp-c);
  margin-bottom: 22px;
}
.sjb-kicker::before {
  content: "";
  width: 30px; height: 2px;
  background: var(--bp-c);
  border-radius: 2px;
}
.sjb-logo {
  height: 72px;
  width: auto;
  margin-bottom: 20px;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.55));
}
.sjb-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(2rem, 4.2vw, 3.4rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.06 !important;
  margin: 0 0 20px !important;
}
.sjb-desc {
  color: rgba(255,255,255,.82);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 28px;
}
.sjb-badges .bp-badge {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
}
.sjb-badges .bp-badge b { color: var(--bp-c); }

.sjb-polaroid {
  position: relative;
  width: min(340px, 82vw);
  background: #fff;
  padding: 12px 12px 0;
  border-radius: 18px;
  transform: rotate(2.5deg);
  box-shadow: 0 50px 90px -36px rgba(0,0,0,.85);
  animation: sjb-float 7s ease-in-out infinite;
}
.sjb-polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  border-radius: 10px;
}
.sjb-polaroid-tag {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 6px 16px;
}
.sjb-polaroid-tag b { font-family: var(--font-heading); font-size: 15px; color: var(--tim-dark); }
.sjb-polaroid-tag { font-size: 11px; color: var(--tim-slate); }
.sjb-flycard {
  position: absolute;
  left: -8px;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 20px;
  background: rgba(12,14,10,.86);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.7);
}
.sjb-flycard-n { font-family: var(--font-heading); font-size: 26px; font-weight: 800; color: var(--bp-c); line-height: 1; }
.sjb-flycard-t { font-size: 11px; color: rgba(255,255,255,.75); letter-spacing: .06em; }
.sjb-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.22);
  pointer-events: none;
}
.sjb-ring-1 { width: 420px; height: 420px; top: -30px; right: -90px; animation: sjb-spin 40s linear infinite; }
.sjb-ring-2 { width: 520px; height: 520px; bottom: -120px; right: -160px; animation: sjb-spin 60s linear infinite reverse; }

/* ---------- TRIO CAMPAGNES ---------- */
.sjb-campaigns { background: var(--tim-light); padding: 88px 0 96px; }
.sjb-campaigns-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sjb-camp {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.5);
}
.sjb-camp img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s ease;
}
.sjb-camp:hover img { transform: scale(1.05); }
.sjb-camp figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 22px 20px;
  background: linear-gradient(transparent, rgba(8,10,7,.85));
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sjb-camp figcaption b { font-family: var(--font-heading); font-size: 1.15rem; }
.sjb-camp figcaption span { font-size: .85rem; color: rgba(255,255,255,.8); }

/* ---------- SECTEURS ---------- */
.sjb-sectors { background: var(--tim-white); padding: 88px 0 70px; }
.sjb-sector-head { margin-bottom: 40px; }
.sjb-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  padding: 6px 0;
}
.sjb-marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: sjb-scroll 32s linear infinite;
}
.sjb-marquee:hover .sjb-marquee-track { animation-play-state: paused; }
.sjb-sector {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  background: #f2f0ea;
  border: 1px solid var(--tim-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--tim-text-dark);
  white-space: nowrap;
}
.sjb-sector img { height: 26px; width: 26px; object-fit: contain; }

/* ---------- GAMMES ---------- */
.sjb-lines { background: var(--tim-white); padding: 12px 0 96px; }
.sjb-lines-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 42px;
}
.sjb-lines-legend { max-width: 420px; color: var(--tim-slate); font-size: .98rem; line-height: 1.6; }
.sjb-lines-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sjb-line {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(170deg, #161a11, #0c0f09);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 26px 50px -30px rgba(0,0,0,.6);
  transition: transform .3s ease, box-shadow .3s ease;
}
.sjb-line:hover { transform: translateY(-6px); box-shadow: 0 46px 80px -34px rgba(0,0,0,.65); }
.sjb-line-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.sjb-line-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.sjb-line:hover .sjb-line-img img { transform: scale(1.07); }
.sjb-line-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 18px 20px;
}
.sjb-line-body b { font-family: var(--font-heading); font-size: 16px; }
.sjb-line-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--tim-dark);
  background: var(--bp-c);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.sjb-line-arrow {
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.25);
  font-size: 16px;
  transition: transform .3s ease, background .3s ease;
}
.sjb-line:hover .sjb-line-arrow { transform: rotate(-45deg); background: var(--bp-c); color: var(--tim-dark); }

/* ---------- NORMES ---------- */
.sjb-norms {
  background: linear-gradient(140deg, #14180f, #0b0e09);
  color: #fff;
  padding: 84px 0;
}
.sjb-norms .bp-h2 { color: #fff !important; }
.sjb-norms .el-kicker { color: var(--bp-c); }
.sjb-norms .el-kicker::after { background: var(--bp-c); }
.sjb-norms-inner { margin-bottom: 30px; }
.sjb-pills { display: flex; flex-wrap: wrap; gap: 12px; max-width: 960px; }
.sjb-pill {
  padding: 11px 20px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--bp-c) 42%, transparent);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  transition: all .25s ease;
}
.sjb-pill:hover { background: var(--bp-c); color: var(--tim-dark); border-color: transparent; transform: translateY(-2px); }

/* ---------- CATALOGUE SJ ---------- */
.sjb-catalog { background: var(--tim-white); padding: 96px 0 110px; }
.sjb-chip-n {
  display: inline-block;
  margin-left: 7px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0,0,0,.08);
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: 1px;
}
.bp-chip.is-active .sjb-chip-n { background: rgba(0,0,0,.16); }
.sjb-result { color: var(--tim-slate); font-size: .95rem; margin: -20px 0 28px; }
.sjb-result b { color: var(--tim-text-dark); }

/* ---------- ANIMATIONS ---------- */
@keyframes sjb-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sjb-float { 0%, 100% { transform: rotate(2.5deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(-12px); } }
@keyframes sjb-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------- RESPONSIVE SJ ---------- */
@media (max-width: 1080px) {
  .sjb-campaigns-grid { grid-template-columns: repeat(2, 1fr); }
  .sjb-lines-grid { grid-template-columns: repeat(2, 1fr); }
  .sjb-ring-1 { right: -40px; }
  .sjb-ring-2 { right: -80px; }
}
@media (max-width: 620px) {
  .sjb-hero { padding: 28px 0 60px; }
  .sjb-logo { height: 56px; }
  .sjb-title { font-size: 1.9rem !important; }
  .sjb-campaigns-grid, .sjb-lines-grid { grid-template-columns: 1fr; }
  .sjb-flycard { left: 0; }
  .sjb-pill { font-size: 12px; }
  .sjb-catalog-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   LIQUID GLASS PREMIUM — système premium partagé par toutes les pages marques
Classes : .lg-* panneaux de verre, .hs-* slider hero glassbox, .ticker bandeau
             catalogue, .aura fonds ambiants, .rx révélation au scroll.
   ============================================================================ */
.lg-panel {
  position: relative;
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-radius: 24px;
  box-shadow:
    0 30px 70px -34px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 -1px 0 rgba(255, 255, 255, .25);
}
.lg-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(255,255,255,.95), rgba(255,255,255,.08) 32%, rgba(255,255,255,.06) 62%, rgba(255,255,255,.72));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.lg-panel-dark {
  background: rgba(13, 16, 11, .5);
  box-shadow:
    0 34px 80px -36px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.5);
}
.lg-panel-dark::before {
  background: linear-gradient(140deg, rgba(255,255,255,.5), rgba(255,255,255,.05) 35%, rgba(255,255,255,.04) 60%, rgba(255,255,255,.28));
}
.lg-panel:hover { transform: translateY(-4px); }
.lg-panel { transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease; }

/* halo / lueur colorée sous un panneau (couleur marque via var --bp-c) */
.lg-halo::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 18% 6%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--bp-c) 45%, transparent), transparent 70%);
  filter: blur(28px);
  opacity: .55;
  pointer-events: none;
}

/* fonds ambiants de type aurore */
.aura {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  animation: aura-drift 26s ease-in-out infinite alternate;
}
.aura-a { background: color-mix(in srgb, var(--bp-c) 55%, transparent); }
.aura-b { background: rgba(255,255,255,.14); }
.aura-c { background: color-mix(in srgb, var(--bp-c) 30%, #ffffff); }
.aura-tl { top: -18%; left: -12%; width: 46%; height: 60%; }
.aura-br { bottom: -20%; right: -10%; width: 50%; height: 66%; animation-delay: -9s; }
.aura-mid { top: 12%; left: 38%; width: 34%; height: 44%; animation-delay: -16s; }

/* ============ HERO SLIDER ============ */
.hs { position: relative; }
.hs-viewport { overflow: hidden; }
.hs-track { display: flex; transition: transform .85s cubic-bezier(.7,0,.25,1); will-change: transform; }
.hs-slide { flex: 0 0 100%; min-width: 100%; }
.hs-nav { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: all .25s ease;
}
.hs-arrow:hover { background: var(--bp-c); border-color: transparent; color: var(--tim-dark); transform: translateY(-50%) scale(1.08); }
.hs-prev { left: 20px; }
.hs-next { right: 20px; }
.hs-dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 9px;
  z-index: 6;
}
.hs-dot {
  width: 9px; height: 9px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  padding: 0;
  transition: all .3s ease;
}
.hs-dot.is-active { width: 30px; background: var(--bp-c); }

/* ============================================================================
   HERO SLIDER MARQUE — cmc-glassbox premium
   Fond image plein écran + carte de verre cmcbiz + kenburns (inspiré accueil)
   ============================================================================ */
.bp-hero.hs, .sjb-hero.hs { height: min(94vh, 940px); min-height: 640px; padding: 0; }
.hs-viewport { position: absolute; inset: 0; overflow: hidden; }
.hs-track { height: 100%; }
.hs-slide { position: relative; height: 100%; overflow: hidden; }

.hs-bgwrap { position: absolute; inset: -3%; z-index: 0; }
.hs-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 28%;
  transform: scale(1.03);
  filter: blur(14px) saturate(1.06);
  transition: filter 1.15s cubic-bezier(.22,.61,.36,1), transform 1.15s ease;
}
.hs-slide.is-active .hs-bg { filter: blur(0); animation: hs-kenburns 22s ease-in-out infinite alternate; }

/* légère vignette périphérique (profondeur, aucun bandeau) */
.hs::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 92% at 50% 42%, transparent 55%, rgba(0,0,0,.32) 100%);
}

.hs-content { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.hs-shell { width: min(1320px, 94%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: clamp(26px, 4.5vw, 64px); }

/* carte glassbox cmcbiz */
.hs-glass {
  position: relative;
  flex: 1 1 0;
  max-width: 740px;
  display: flex; flex-direction: column; gap: 20px;
  padding: clamp(30px, 4vw, 52px) clamp(28px, 4vw, 54px);
  border-radius: 36px;
  background: linear-gradient(135deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.025) 60%);
  border: 1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow: 0 44px 110px -38px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(255,255,255,.06);
}
.hs-glass::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(72% 56% at 14% 0%, color-mix(in srgb, var(--bp-c) 26%, transparent), transparent 62%);
}
.hs-visual { flex: 0 1 420px; min-width: 240px; position: relative; display: flex; align-items: center; justify-content: center; }

.hs-slide .hs-glass, .hs-slide .hs-visual { opacity: 0; transform: translateY(44px) scale(.99); transition: opacity .9s ease, transform 1s cubic-bezier(.16,1,.3,1); }
.hs-slide.is-active .hs-glass { opacity: 1; transform: none; transition-delay: .2s; }
.hs-slide.is-active .hs-visual { opacity: 1; transform: none; transition-delay: .42s; }

/* ============================================================================
   TICKER CATALOGUE — bande passante TV (défilement continu)
   ============================================================================ */
.ticker {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: linear-gradient(180deg, #0e1109 0%, #070904 100%);
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.ticker::after {
  content: "";
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
}
.ticker-track {
  display: flex; align-items: center;
  width: max-content; flex: none;
  animation: ticker-scroll 40s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 14px 30px;
  border-right: 1px solid rgba(255,255,255,.12);
  white-space: nowrap; color: #fff;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}
.ticker-item:hover {
  background: rgba(255,255,255,.08);
  color: var(--bp-c);
}
.ticker-item img {
  width: 52px; height: 52px; border-radius: 14px; object-fit: cover;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 24px -10px rgba(0,0,0,.7);
}
.ticker-item b { font-size: 13.5px; font-weight: 700; display: block; line-height: 1.25; }
.ticker-item span { display: block; margin-top: 3px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--bp-c); }

/* ============ ANIMATIONS GLOBALES ============ */
@keyframes hs-kenburns {
  0%   { transform: scale(1.03) translate(0, 0); }
  100% { transform: scale(1.16) translate(-1.6%, 1.4%); }
}
/* ============ RÉVÉLATION AU SCROLL ============ */
.rx {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.3,1);
}
.rx.in-view { opacity: 1; transform: none; }
.rx-d1 { transition-delay: .08s; }
.rx-d2 { transition-delay: .16s; }
.rx-d3 { transition-delay: .24s; }
.rx-d4 { transition-delay: .32s; }
.rx-d5 { transition-delay: .4s; }

/* ============ ANIMATIONS GLOBALES ============ */
@keyframes aura-drift {
  from { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(6%, -8%, 0) scale(1.12); }
  to   { transform: translate3d(-5%, 6%, 0) scale(.96); }
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============ RESPONSIVE PREMIUM ============ */
@media (max-width: 1080px) {
  .hs-arrow { display: none !important; }
  .aura-a, .aura-c { opacity: .4; }
  .bp-hero.hs, .sjb-hero.hs { height: min(100svh, 820px); }
  .hs-shell { flex-direction: column; text-align: center; gap: 24px; }
  .hs-glass { max-width: none; padding: clamp(22px,4vw,36px); }
  .hs-visual { width: 100%; flex: none; }
}
@media (max-width: 767px) {
  .hs-visual { display: none; }
  .bp-hero.hs, .sjb-hero.hs { height: min(100svh, 640px); min-height: 500px; }
  .hs-glass { padding: 22px 20px; border-radius: 24px; gap: 14px; }
  .ticker-item { padding: 12px 18px; gap: 10px; }
  .ticker-item img { width: 42px; height: 42px; border-radius: 10px; }
  .ticker-item b { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .aura, .rx { animation: none !important; transition: none !important; }
  .rx { opacity: 1; transform: none; }
  .hs-track { transition: none; }
}

/* ============ HÉROS SLIDER : éléments de diapositives ============ */
.lg-halo { isolation: isolate; }

/* collage de cartes produits (slide 2) */
.hp-collage {
  position: relative;
  width: min(420px, 82vw);
  height: 340px;
  min-height: 0 !important;
}
.hp-img-card {
  position: absolute;
  width: 205px;
  padding: 9px;
  border-radius: 18px;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.hp-img-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}
.hp-rank-1 { left: 2%; top: 8%; transform: rotate(-7deg); z-index: 1; }
.hp-rank-2 { left: 30%; top: 18%; transform: rotate(3deg); z-index: 3; }
.hp-rank-3 { left: 58%; top: 2%; transform: rotate(8deg); z-index: 2; }
.hp-collage:hover .hp-rank-1 { transform: rotate(-4deg) translateY(-8px); }
.hp-collage:hover .hp-rank-2 { transform: rotate(0deg) translateY(-10px); }
.hp-collage:hover .hp-rank-3 { transform: rotate(5deg) translateY(-6px); }

/* ============ COLLAGE FUTURISTE — holo multi-images (fx-stage) ============ */
.fx-stage {
  width: min(500px, 92vw);
  height: 380px;
  perspective: 1100px;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.45));
}
.fx-grid {
  position: absolute; inset: -10% -6%; z-index: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--bp-c) 34%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--bp-c) 34%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 30%, transparent 72%);
  opacity: .55;
  transform: rotateX(58deg) translateZ(-60px);
  animation: fxGridDrift 22s linear infinite;
}
@keyframes fxGridDrift {
  to { background-position: 0 34px, 0 34px; }
}
.fx-orbit {
  position: absolute; top: 50%; left: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--bp-c) 60%, transparent);
  border-radius: 50%;
  margin: -160px 0 0 -160px; width: 320px; height: 320px;
  animation: fxSpin 26s linear infinite;
}
.fx-orbit::before {
  content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bp-c);
  box-shadow: 0 0 16px var(--bp-c), 0 0 42px var(--bp-c);
}
.fx-orbit-2 {
  width: 440px; height: 440px; margin: -220px 0 0 -220px;
  border-style: solid; border-width: 1px;
  opacity: .4; animation-direction: reverse; animation-duration: 44s;
}
.fx-core {
  position: absolute; top: 50%; left: 50%;
  width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--bp-c) 70%, #fff), color-mix(in srgb, var(--bp-c) 55%, transparent) 62%, transparent 74%);
  filter: blur(1px);
  animation: fxPulse 4.5s ease-in-out infinite;
  box-shadow: 0 0 70px color-mix(in srgb, var(--bp-c) 65%, transparent);
}
@keyframes fxSpin { to { transform: rotate(360deg); } }
@keyframes fxPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .85; }
  50% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
}
.fx-stage .fx-cell {
  width: 138px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.22);
  transform-style: preserve-3d;
  transition: box-shadow .4s ease, border-color .4s ease;
  will-change: transform;
}
.fx-stage .fx-cell::after {
  content: ""; position: absolute; inset: 0; border-radius: 18px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--bp-c) 42%, transparent), transparent 46%);
  opacity: .7; pointer-events: none;
}
.fx-stage .fx-cell:hover { box-shadow: 0 26px 60px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--bp-c) 60%, transparent); border-color: color-mix(in srgb, var(--bp-c) 70%, #fff); }
.fx-stage .fx-cell img {
  aspect-ratio: 1; border-radius: 12px;
}
.fx-cell-1 { left: 2%;  top: 4%;  z-index: 3; animation: fxFloat 7s ease-in-out infinite; }
.fx-cell-2 { left: 33%; top: 0%;  z-index: 6; animation: fxFloat 8s ease-in-out -2s infinite; }
.fx-cell-3 { left: 63%; top: 9%;  z-index: 4; animation: fxFloat 6.5s ease-in-out -4s infinite; }
.fx-cell-4 { left: 12%; top: 45%; z-index: 5; animation: fxFloat 9s ease-in-out -1s infinite; }
.fx-cell-5 { left: 46%; top: 42%; z-index: 7; animation: fxFloat 7.5s ease-in-out -3s infinite; }
.fx-cell-6 { left: 74%; top: 47%; z-index: 3; animation: fxFloat 6s ease-in-out -5s infinite; }
@keyframes fxFloat {
  0%, 100% { transform: translateY(0) rotate(var(--fx-r, 0deg)); }
  50% { transform: translateY(-16px) rotate(var(--fx-r, 0deg)); }
}
.fx-cell-1 { --fx-r: -5deg; }
.fx-cell-2 { --fx-r: 3deg; }
.fx-cell-3 { --fx-r: -2deg; }
.fx-cell-4 { --fx-r: 5deg; }
.fx-cell-5 { --fx-r: -3deg; }
.fx-cell-6 { --fx-r: 4deg; }

/* panneau statistique (slide 3) */
.hp-glass-stat {
  width: min(360px, 82vw);
  padding: 46px 30px;
  border-radius: 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.hp-glass-stat b {
  font-family: var(--font-heading);
  font-size: clamp(3.4rem, 7vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--bp-c);
  text-shadow: 0 0 40px color-mix(in srgb, var(--bp-c) 55%, transparent);
}
.hp-glass-stat span { font-size: 1rem; color: rgba(255,255,255,.88); line-height: 1.55; }
.hp-glass-stat small { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-c); }

/* checklist "hp-feats" */
.hp-feats {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: grid;
  gap: 12px;
}
.hp-feats li {
  position: relative;
  padding-left: 30px;
  color: rgba(255,255,255,.92);
  font-size: .97rem;
  line-height: 1.5;
}
.hp-feats li::before {
  content: "\2713";
  position: absolute;
  left: 0; top: 1px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tim-gold), var(--tim-gold-light));
  color: var(--tim-dark);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-feats li b { color: #fff; }

/* ============ TICKER bandeau catalogue (variante générique) ============ */
.ticker-band { margin-top: 0; }

@media (max-width: 620px) {
  .hp-collage { width: 78vw; height: 300px; }
  .hp-img-card { width: 170px; }
  .hp-glass-stat { width: 86vw; }
  .fx-stage { height: 320px; }
  .fx-stage .fx-cell { width: 108px; }
  .fx-cell-1 { left: 0%; top: 4%; }
  .fx-cell-2 { left: 38%; top: 0%; }
  .fx-cell-3 { left: 68%; top: 12%; }
  .fx-cell-4 { left: -2%; top: 52%; }
  .fx-cell-5 { left: 40%; top: 48%; }
  .fx-cell-6 { left: 72%; top: 56%; }
}

/* -------- SJ : collage du hero slider -------- */
.sjb-hero .hp-collage { height: 340px; }

/* ============================================================================
   ARCHIVE MARQUES — /marques/ (.abra-* / .bcard)
   ============================================================================ */
.abra-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1000px 560px at 80% -20%, color-mix(in srgb, var(--bp-c) 20%, transparent), transparent 60%), var(--tim-dark);
  color: #fff;
  padding: 34px 0 80px;
}
.abra-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.abra-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(620px 380px at 50% 20%, #000 10%, transparent 85%);
  -webkit-mask-image: radial-gradient(620px 380px at 50% 20%, #000 10%, transparent 85%);
}
.abra-head { position: relative; max-width: 720px; padding: 34px 0 10px; }
.abra-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.1 !important;
  margin: 14px 0 18px !important;
}
.abra-desc { color: rgba(255,255,255,.82); max-width: 560px; font-size: 1.05rem; line-height: 1.7; margin-bottom: 26px; }
.abra-hero .bp-badge {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
}
.abra-hero .bp-badge b { color: var(--bp-c); }
.abra-list { background: var(--tim-light); padding: 92px 0 106px; }
.bgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.bcard {
  overflow: hidden;
  padding: 24px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: var(--tim-text-dark);
}
.bcard-glint {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--bp-c), transparent);
  opacity: .85;
}
.bcard-logo { display: flex; align-items: center; justify-content: center; min-height: 86px; padding: 8px 0; }
.bcard-logo img { max-height: 62px; max-width: 150px; object-fit: contain; }
.bcard-mono {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bp-c), color-mix(in srgb, var(--bp-c) 40%, #000));
  color: var(--tim-dark);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bcard-body b { font-family: var(--font-heading); font-size: 17px; display: block; margin-bottom: 6px; }
.bcard-body p {
  margin: 0;
  font-size: 13px;
  color: var(--tim-slate);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bcard-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--tim-border);
}
.bcard-pill {
  background: color-mix(in srgb, var(--bp-c) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--bp-c) 32%, transparent);
  color: color-mix(in srgb, var(--bp-c) 62%, #000);
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
.bcard-go {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--bp-c);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .3s ease;
}
.bcard:hover { transform: translateY(-7px); }
.bcard:hover .bcard-go { gap: 12px; }
/* Logos sur fond blanc : même réglage que bp-logo-card (centre blanc, bords transparents) */
.bcard.lg-panel {
  background: radial-gradient(ellipse 68% 62% at 50% 34%, #fff 0%, #fff 42%, rgba(255,255,255,.82) 60%, rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.abra-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #14180f, #0b0e09);
  color: #fff;
  padding: 92px 0;
}
.abra-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(420px 260px at 50% 40%, #000 20%, transparent 90%);
  -webkit-mask-image: radial-gradient(420px 260px at 50% 40%, #000 20%, transparent 90%);
  pointer-events: none;
}
.abra-cta-inner { position: relative; max-width: 760px; margin: 0 auto; text-align: center; }
.abra-cta-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.12 !important;
  margin: 0 0 16px !important;
}
.abra-cta-text { color: rgba(255,255,255,.8); font-size: 1.05rem; line-height: 1.65; margin: 0 0 28px; }
.abra-cta .bp-kicker { justify-content: center; }

@media (max-width: 1080px) {
  .bgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .bgrid { grid-template-columns: 1fr; }
  .abra-hero { padding: 28px 0 60px; }
}

/* =========================================================================
   MENU — Déroulement fluide des sous-menus (effet rouleau/rideau)
   ========================================================================= */
#main-header #top-menu li#menu-item-149 > ul.sub-menu.tim-drop,
#main-header #top-menu li#menu-item-150 > ul.sub-menu.tim-drop,
#main-header #top-menu li ul.sub-menu,
#main-header #et-top-navigation .nav li ul {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) scaleY(.68) !important;
  transform-origin: top center !important;
  transition:
    opacity .32s cubic-bezier(.3,.1,.25,1),
    transform .32s cubic-bezier(.3,.1,.25,1),
    visibility 0s linear .32s !important;
}
#main-header #top-menu li#menu-item-149:hover > ul.sub-menu.tim-drop,
#main-header #top-menu li#menu-item-149.mega-open > ul.sub-menu.tim-drop,
#main-header #top-menu li#menu-item-149 > ul.sub-menu.tim-drop.visible,
#main-header #top-menu li#menu-item-150:hover > ul.sub-menu.tim-drop,
#main-header #top-menu li#menu-item-150.mega-open > ul.sub-menu.tim-drop,
#main-header #top-menu li#menu-item-150 > ul.sub-menu.tim-drop.visible,
#main-header #top-menu li:hover > ul.sub-menu,
#main-header #top-menu li.mega-open > ul.sub-menu,
#main-header #top-menu li > ul.sub-menu.visible,
#main-header #et-top-navigation .nav li:hover > ul,
#main-header #et-top-navigation .nav li.mega-open > ul,
#main-header #et-top-navigation .nav li > ul.visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scaleY(1) !important;
  transform-origin: top center !important;
  transition:
    opacity .32s cubic-bezier(.3,.1,.25,1),
    transform .32s cubic-bezier(.3,.1,.25,1),
    visibility 0s !important;
}

#et-top-navigation ul li:hover > ul,
#main-header #et-top-navigation ul li:hover > ul {
  animation: none !important;
}

/* ============ ZOOM PRODUIT — overlay « façon site » ============ */
.woocommerce-product-gallery__trigger { display: none !important; }

/* Galerie produit : panneau clair pour que les images transparentes (PNG)
   s'affichent comme une vraie photo produit, sans cadre sombre */
.woocommerce-product-gallery {
  background: #fff;
  border-radius: 20px;
  padding: 6px;
  border: 1px solid rgba(127,102,77,.16);
  box-shadow: 0 16px 40px -20px rgba(0,0,0,.4);
}
.woocommerce-product-gallery img { display: block; width: 100%; height: auto; }

/* Bande passante : pastille blanche derrière chaque miniature transparente */
.ticker-item img { background: #fff; padding: 4px; }

#tim-lb {
  --lb-accent: var(--bp-c, var(--tim-gold));
  position: fixed; inset: 0; z-index: 2147483000;
  height: 100dvh;
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}
#tim-lb.is-open { display: flex; }
.tim-lb-backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 800px at 72% -12%, color-mix(in srgb, var(--lb-accent) 26%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(18, 11, 5, .84), rgba(6, 4, 2, .92));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tim-lb-dialog {
  position: relative; z-index: 1;
  width: min(1120px, 100%);
  height: min(820px, 100%);
  display: flex; flex-direction: column;
  padding: clamp(10px, 2vw, 18px);
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 44px 96px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.tim-lb-top {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 6px 12px;
  color: #fff;
}
.tim-lb-count {
  flex: none;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 12px; letter-spacing: .16em;
  color: var(--lb-accent);
  white-space: nowrap;
}
.tim-lb-title {
  flex: 1; min-width: 0;
  font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: rgba(255,255,255,.92);
}
.tim-lb-actions { display: flex; gap: 8px; flex: none; }
.tim-lb-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 20px; line-height: 1; padding: 0;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.tim-lb-btn:hover {
  background: var(--lb-accent);
  border-color: transparent;
  color: #190d04;
  transform: translateY(-1px);
}
.tim-lb-close { margin-left: 2px; }
.tim-lb-stage {
  position: relative; flex: none;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(760px 420px at 50% 0%, color-mix(in srgb, var(--lb-accent) 18%, transparent), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f1f1ed 100%);
  border: 1px solid color-mix(in srgb, var(--lb-accent) 32%, transparent);
}
.tim-lb-figure {
  margin: 0;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
  touch-action: none;
}
.tim-lb-figure img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  cursor: inherit;
  will-change: transform;
  transition: transform .22s ease;
  transform: translate(0px,0px) scale(1);
}
.tim-lb-figure.tim-lb-drag { cursor: grabbing; }
.tim-lb-figure.tim-lb-drag img { transition: none; }
.tim-lb-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  padding: 0;
  font-size: 26px; line-height: 1;
  color: #fff;
  background: rgba(20, 12, 5, .55);
  border: 1px solid rgba(255,255,255,.2);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.tim-lb-arrow:hover {
  background: var(--lb-accent);
  border-color: transparent;
  color: #190d04;
  transform: translateY(-50%) scale(1.08);
}
.tim-lb-arrow[disabled] { opacity: .3; pointer-events: none; }
.tim-lb-prev { left: 14px; }
.tim-lb-next { right: 14px; }

@media (max-width: 767px) {
  .tim-lb-dialog { width: 100%; padding: 8px; border-radius: 18px; }
  .tim-lb-figure img { width: 100%; height: 100%; }
  .tim-lb-arrow { width: 38px; height: 38px; font-size: 22px; }
  .tim-lb-prev { left: 8px; }
  .tim-lb-next { right: 8px; }
  .tim-lb-title { max-width: 45vw; }
}

/* ===== NEO-CYBER : accessibilité & responsive ===== */
@media (prefers-reduced-motion: reduce) {
  #tim-lb, #tim-lb * { transition: none !important; }
  .tim-hero-lg, .liquidGlass-wrapper { animation: none !important; }
  html.lg-no-webgl .tim-hero-lg { display: none; }
}
@media (max-width: 1080px) {
  .tim-hero-lg { opacity: .42; }
}

/* ===== AQ HERO : accessibilité & animations douces ===== */
@media (prefers-reduced-motion: reduce) {
  .aq-hero .aq-hx, .aq-hero .aq-hero-media, .aq-hero .aq-hero-badge,
  .aq-hero .aq-box-shine, .aq-hero .aq-box-aura, .aq-hero .aq-hero-chip::before {
    animation: none !important;
  }
  .aq-hero .aq-hero-media, .aq-hero .aq-hero-badge { transform: none; }
}

/* ======================================================================
   AQUASTRONG (taxonomy-product_brand-aquastrong) — variante éditoriale
   ====================================================================== */
.aq-hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--bp-c, #10346C) 42%, transparent), transparent 60%),
    linear-gradient(180deg, #0a1230 0%, #101c3f 55%, #0a1733 100%);
  --aq-fx: 68%;   /* centre horizontal de la zone nette (femme) */
  --aq-fy: 50%;   /* centre vertical */
  --aq-fr: 30%;   /* rayon de la zone nette */
}
/* ===== COUCHE 1 : BACKGROUND — flou gaussien radial =====
   Deux calques de la même image :
   - .aq-hero-blur  -> image floutée, visible PARTOUT sauf au focus (collée / masquée au centre)
   - .aq-hero-media -> image NETTE, visible UNIQUEMENT dans la zone de focus
   ================================================================== */
.aq-hero-blur {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;
  filter: blur(16px) saturate(1.2) brightness(1.15);
  transform: scale(1.06);
  animation: aqHeroZoom 34s ease-in-out infinite alternate;
  will-change: transform;
  -webkit-mask-image: radial-gradient(circle at var(--aq-fx) var(--aq-fy), transparent 0%, transparent calc(var(--aq-fr) - 10%), #000 calc(var(--aq-fr) + 3%));
  mask-image: radial-gradient(circle at var(--aq-fx) var(--aq-fy), transparent 0%, transparent calc(var(--aq-fr) - 10%), #000 calc(var(--aq-fr) + 3%));
}
.aq-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;
  filter: brightness(1.02) contrast(1.02);
  transform: scale(1.06);
  animation: aqHeroZoom 34s ease-in-out infinite alternate;
  will-change: transform;
  -webkit-mask-image: radial-gradient(circle at var(--aq-fx) var(--aq-fy), #000 0%, #000 calc(var(--aq-fr) - 10%), transparent calc(var(--aq-fr) + 3%));
  mask-image: radial-gradient(circle at var(--aq-fx) var(--aq-fy), #000 0%, #000 calc(var(--aq-fr) - 10%), transparent calc(var(--aq-fr) + 3%));
}
@keyframes aqHeroZoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}
/* ===== COUCHE 2 : VOILE — dégradé blanc→transparent (g.), droite claire ===== */
.aq-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.45) 40%, rgba(255,255,255,0) 60%);
  z-index: 1;
}
/* ===== COUCHE 3 : DESIGN FUTURISTE 3D au-dessus du dégradé ===== */
.aq-hero-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  perspective: 900px;
}
/* sol 3D futuriste (grille en perspective aqua) */
.aq-hx-grid {
  position: absolute;
  left: -12%;
  right: 28%;
  bottom: -16%;
  height: 55%;
  background-image:
    linear-gradient(rgba(0,217,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,217,255,.16) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: rotateX(58deg) translateZ(-40px);
  transform-origin: 50% 0%;
  mask-image: linear-gradient(180deg, transparent 6%, #000 60%);
  -webkit-mask-image: linear-gradient(180deg, transparent 6%, #000 60%);
  animation: aqGridDrift 26s linear infinite;
  filter: drop-shadow(0 0 12px rgba(0,217,255,.35));
}
@keyframes aqGridDrift {
  to { background-position: 0 44px, 0 44px; }
}
/* anneaux holographiques rotatifs */
.aq-hx-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(0,217,255,.30);
  box-shadow: 0 0 24px rgba(0,217,255,.18) inset, 0 0 24px rgba(0,217,255,.18);
  pointer-events: none;
  animation: aqRingSpin 30s linear infinite;
}
.aq-hx-ring::before {
  content: "";
  position: absolute;
  top: -5px; left: 50%;
  width: 10px; height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #00d9ff;
  box-shadow: 0 0 14px #00d9ff, 0 0 42px #00d9ff;
}
.aq-hx-ring-1 { width: 420px; height: 420px; right: 6%; top: 50%; margin-top: -210px; }
.aq-hx-ring-2 { width: 620px; height: 620px; right: -4%; top: 50%; margin-top: -310px; border-style: dashed; opacity: .5; animation-direction: reverse; animation-duration: 46s; }
@keyframes aqRingSpin { to { transform: rotate(360deg); } }
/* cœur lumineux */
.aq-hx-core {
  position: absolute;
  right: 14%; top: 42%;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9ff4ff, #00a8e0 58%, transparent 74%);
  box-shadow: 0 0 60px rgba(0,217,255,.7), 0 0 140px rgba(0,180,255,.45);
  animation: aqCorePulse 5s ease-in-out infinite;
}
@keyframes aqCorePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .85; }
  50% { transform: translate(-50%, -50%) scale(1.28); opacity: 1; }
}
.aq-hx-core::before, .aq-hx-core::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 180px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,217,255,.7), transparent);
  transform: translate(-50%, -50%) rotate(var(--aq-r, 0deg));
  animation: aqCrossSpin 14s linear infinite;
}
.aq-hx-core::after { --aq-r: 60deg; }
@keyframes aqCrossSpin { to { transform: translate(-50%, -50%) rotate(calc(var(--aq-r, 0deg) + 360deg)); } }
/* orbitales elliptiques pyro tech */
.aq-hx-orbit {
  position: absolute;
  border: 1px dashed rgba(0,217,255,.22);
  border-radius: 50%;
  animation: aqOrbitSpin 24s linear infinite;
  pointer-events: none;
}
.aq-hx-orbit::before {
  content: "";
  position: absolute; top: 8px; left: 50%;
  width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%;
  background: #7deaff;
  box-shadow: 0 0 12px #7deaff;
}
.aq-hx-orbit-1 { width: 260px; height: 120px; right: 10%; top: 36%; transform: rotate(-18deg); }
.aq-hx-orbit-2 { width: 340px; height: 150px; right: 2%; top: 54%; transform: rotate(14deg); animation-direction: reverse; }
@keyframes aqOrbitSpin { to { transform: rotate(342deg); } }
/* sparks flottants */
.aq-hx-spark {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #8feeff;
  box-shadow: 0 0 10px #00d9ff, 0 0 26px #00d9ff;
  opacity: .85;
  animation: aqSpark 9s ease-in-out infinite;
}
.aq-hx-spark-1 { left: 8%; top: 22%; }
.aq-hx-spark-2 { left: 22%; top: 66%; animation-delay: -3s; }
.aq-hx-spark-3 { left: 44%; top: 30%; animation-delay: -6s; }
.aq-hx-spark-4 { right: 30%; top: 74%; animation-delay: -2s; }
.aq-hx-spark-5 { right: 12%; top: 20%; animation-delay: -5s; }
@keyframes aqSpark {
  0%, 100% { transform: translateY(0) scale(1); opacity: .35; }
  50% { transform: translateY(-26px) scale(1.35); opacity: 1; }
}
/* beam balayage horizontal */
.aq-hx-beam {
  position: absolute;
  left: -30%;
  width: 160%;
  height: 2px;
  top: 58%;
  background: linear-gradient(90deg, transparent, rgba(0,217,255,.6) 50%, transparent);
  box-shadow: 0 0 22px rgba(0,217,255,.55);
  opacity: .5;
  animation: aqBeam 11s ease-in-out infinite;
  filter: blur(.5px);
}
@keyframes aqBeam {
  0%, 100% { transform: translateY(-300px); opacity: 0; }
  30%, 70% { opacity: .55; }
  50% { transform: translateY(220px); }
  100% { transform: translateY(300px); opacity: 0; }
}
/* ===== GLASS BOX — logo sur carte verre fumé ===== */
.aq-hero-badge {
  position: absolute;
  right: 0;
  bottom: 70px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 340px;
  padding: 34px 38px 30px;
  border-radius: 30px;
  isolation: isolate;
  background: linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 46%, rgba(0,217,255,.10));
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  backdrop-filter: blur(26px) saturate(1.7);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(255,255,255,.12),
    inset 2px 2px 8px rgba(255,255,255,.12),
    0 40px 90px -36px rgba(0,0,0,.65),
    0 0 70px -18px rgba(0,217,255,.45);
  animation: aqBoxFloat 9s ease-in-out infinite;
}
@keyframes aqBoxFloat {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  50% { transform: translateY(-14px) rotateZ(.4deg); }
}
.aq-box-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.aq-box-shine::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -80%;
  width: 60%;
  height: 180%;
  transform: rotate(24deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation: aqShineSweep 5.2s ease-in-out infinite;
}
@keyframes aqShineSweep {
  0%, 55% { left: -80%; }
  85%, 100% { left: 170%; }
}
.aq-box-aura {
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 8%, rgba(0,217,255,.22), transparent 55%);
  animation: aqAuraGlow 6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes aqAuraGlow {
  from { opacity: .65; }
  to   { opacity: 1; }
}
.aq-hero-badge .aq-hero-logo {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 250px;
  height: auto;
  opacity: 1;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.45));
}
.aq-hero-chip {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #dff9ff;
  background: rgba(0,217,255,.12);
  border: 1px solid rgba(0,217,255,.38);
  border-radius: 999px;
  box-shadow: 0 0 22px rgba(0,217,255,.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.aq-hero-chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #00d9ff;
  box-shadow: 0 0 10px #00d9ff;
  animation: aqChipBlink 2.4s ease-in-out infinite;
}
@keyframes aqChipBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.bp-crumbs-light a { color: rgba(255,255,255,.7); }
.bp-crumbs-light a:hover { color: #fff; }

.aq-hero-shell {
  position: relative;
  z-index: 3;
  width: min(1200px, 92vw);
  margin: 0 auto;
  padding: 96px 0 84px;
}
.aq-hero-copy { max-width: 620px; }
.aq-hero-copy .bp-kicker {
  box-shadow: 0 2px 18px rgba(2,10,22,.55);
}
.aq-hero-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.6rem, 6vw, 4.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  color: #fff !important;
  margin: 0 0 14px !important;
  letter-spacing: -.015em;
  text-shadow: 0 2px 6px rgba(2,10,22,.75), 0 6px 18px rgba(2,10,22,.6), 0 22px 50px rgba(0,0,0,.55);
}
.aq-hero-desc {
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.94);
  max-width: 560px;
  margin: 0 0 26px;
  text-shadow: 0 1px 4px rgba(2,10,22,.85), 0 4px 14px rgba(2,10,22,.6);
}
.aq-hero .bp-actions { margin-bottom: 26px; }

.aq-hero .bp-badges { gap: 10px; }
.aq-hero .bp-badge {
  background: rgba(5,20,38,.5);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 2px 14px rgba(2,10,22,.45);
}
.aq-hero .bp-badge b { color: #fff; }

/* — ticker band déjà stylé par .ticker — */

/* — familles — */
.aq-families {
  background: var(--tim-white, #fff);
  padding: 96px 0 60px;
}
.aq-h2 { color: #10141c !important; }
.aq-families-note {
  max-width: 400px;
  color: #64707f;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 4px;
}
.aq-fam-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 44px;
}
.aq-fam {
  position: relative;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(16,52,108,.1);
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.aq-fam:hover {
  transform: translateY(-7px);
  box-shadow: 0 30px 60px -22px rgba(16,52,108,.4);
  border-color: rgba(16,52,108,.28);
  text-decoration: none;
}
.aq-fam-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(180deg, #eef3fb, #dfe8f5);
}
.aq-fam-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.aq-fam:hover .aq-fam-media img { transform: scale(1.07); }
.aq-fam-count {
  position: absolute;
  top: 14px;
  left: 14px;
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: color-mix(in srgb, var(--bp-c, #10346C) 92%, #000);
  border-radius: 999px;
  box-shadow: 0 8px 18px -6px rgba(16,52,108,.5);
}
.aq-fam-body {
  padding: 18px 18px 20px;
}
.aq-fam-body b {
  display: block;
  font-family: var(--font-heading);
  font-size: 17.5px;
  color: #10141c;
  margin-bottom: 7px;
}
.aq-fam-body p {
  font-size: 13.5px;
  line-height: 1.5;
  color: #64707f;
  margin: 0 0 13px;
}
.aq-fam-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bp-c, #10346C);
}
.aq-fam-link i {
  font-style: normal;
  transition: transform .25s ease;
}
.aq-fam:hover .aq-fam-link i { transform: translate(3px, -3px); }

/* — avantages B2B — */
.aq-perks {
  background:
    radial-gradient(1000px 480px at 90% 0%, color-mix(in srgb, var(--bp-c, #10346C) 38%, transparent), transparent 62%),
    linear-gradient(180deg, #0b1531 0%, #0e1c3d 100%);
  padding: 84px 0;
}
.aq-perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.aq-perk {
  position: relative;
  padding: 30px 26px;
  border-radius: 22px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.aq-perk-ic {
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
}
.aq-perk-ic img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: invert(1) brightness(1.6);
  display: block;
}
.aq-perk b {
  display: block;
  font-family: var(--font-heading);
  font-size: 17px;
  color: #fff;
  margin-bottom: 8px;
}
.aq-perk p {
  font-size: 14.5px;
  line-height: 1.62;
  color: rgba(255,255,255,.72);
  margin: 0;
}

/* — catalogue filtrable — */
.aq-chips .bp-chip { cursor: pointer; }
.aq-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.aq-prod {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(16,52,108,.1);
  transition: transform .3s ease, box-shadow .3s ease;
  text-decoration: none;
}
.aq-prod:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 55px -24px rgba(16,52,108,.42);
  text-decoration: none;
}
.aq-prod-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f2f6fc;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.aq-prod-media img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  transition: transform .45s ease;
}
.aq-prod:hover .aq-prod-media img { transform: scale(1.06); }
.aq-prod-fam {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--bp-c, #10346C) 90%, #000);
  border-radius: 999px;
}
.aq-prod-body {
  padding: 14px 16px 18px;
  border-top: 1px solid rgba(16,52,108,.07);
}
.aq-prod-cat {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bp-c, #10346C) 70%, #7a8aa0);
  margin-bottom: 5px;
}
.aq-prod-title {
  display: block;
  font-size: 14.5px;
  line-height: 1.35;
  color: #10141c;
  font-weight: 700;
}

@media (max-width: 1080px) {
  .aq-fam-grid { grid-template-columns: repeat(2, 1fr); }
  .aq-catalog-grid { grid-template-columns: repeat(3, 1fr); }
  .aq-hx-ring-2 { right: -24%; }
  .aq-hero-badge { max-width: 300px; padding: 28px 30px 26px; }
}
@media (max-width: 820px) {
  .aq-perks-grid { grid-template-columns: 1fr; }
  .aq-hero-badge { position: static; flex-direction: row; align-items: center; justify-content: flex-start; margin-top: 36px; }
  .aq-hero-badge .aq-hero-logo { max-width: 190px; }
  .aq-catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .aq-hx-ring-1, .aq-hx-ring-2, .aq-hx-core, .aq-hx-orbit { display: none; }
}
@media (max-width: 620px) {
  .aq-fam-grid, .aq-catalog-grid { grid-template-columns: 1fr; }
  .aq-hero-shell { padding: 70px 0 60px; }
  .aq-hero-chip { font-size: 11px; padding: 6px 12px; }
  .aq-hx-grid { right: 0; height: 45%; background-size: 32px 32px; }
  .aq-hx-beam { display: none; }
}

/* ==========================================================================
   FEROOF — variante éditoriale tuiles métalliques gravillonnées
   (accent terracotta de la charte + mise en avant GARANTIE 50 ANS)
   ========================================================================== */

.fr-hero {
  position: relative;
  min-height: 620px;
  padding: 150px 0 90px;
  color: var(--tim-text-dark, #FFF7EC);
  background:
    radial-gradient(1200px 640px at 82% -10%, color-mix(in srgb, var(--bp-c, #D6492E) 32%, transparent), transparent 60%),
    linear-gradient(160deg, #111722 0%, #0a0e17 55%, #06090f 100%);
  overflow: hidden;
  isolation: isolate;
}
.fr-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fr-hero-slider { cursor: grab; }
.fr-slide-list { position: absolute; inset: 0; z-index: 0; }
.fr-slide {
  position: absolute;
  inset: -2.5%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.07);
  transition: opacity 1s cubic-bezier(.22,.61,.36,1), visibility 0s 1s, transform 6s linear;
  will-change: opacity, transform;
}
.fr-slide.active {
  opacity: .82;
  visibility: visible;
  transform: scale(1.12);
  transition: opacity 1s cubic-bezier(.22,.61,.36,1), visibility 0s 0s, transform 7s linear;
}
.fr-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(100deg, rgba(6,9,16,.62) 0%, rgba(6,9,16,.42) 32%, rgba(6,9,16,.1) 58%, rgba(6,9,16,.28) 100%);
}
.fr-hero-photo {
  position: absolute;
  left: -6%;
  bottom: -6%;
  width: 42%;
  height: 74%;
  z-index: 1;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(100deg, #000 40%, transparent 88%);
  mask-image: linear-gradient(100deg, #000 40%, transparent 88%);
  opacity: .2;
  filter: saturate(.92);
}
.fr-sld-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.4);
  background: rgba(6,10,17,.4);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0 !important;
  transition: background .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  pointer-events: auto;
}
.fr-sld-arrow:hover {
  background: var(--bp-c, #D6492E);
  border-color: var(--bp-c, #D6492E);
  transform: translateY(-50%) scale(1.07);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--bp-c, #D6492E) 45%, transparent);
}
.fr-sld-prev { left: 26px; }
.fr-sld-next { right: 26px; }
.fr-sld-dots {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 10px;
  pointer-events: auto;
}
.fr-sld-dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  flex: 0 0 auto;
  transition: width .35s cubic-bezier(.16,1,.3,1), background .3s ease, box-shadow .3s ease;
}
.fr-sld-dot.active {
  width: 32px;
  background: var(--bp-c, #D6492E);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--bp-c, #D6492E) 22%, transparent);
}
.fr-orbe {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  opacity: .5;
}
.fr-orbe-1 { width: 320px; height: 320px; left: -90px; bottom: -70px; background: radial-gradient(circle, color-mix(in srgb, var(--bp-c, #D6492E) 46%, transparent), transparent 70%); }
.fr-orbe-2 { width: 220px; height: 220px; right: 28%; bottom: 8%; background: radial-gradient(circle, color-mix(in srgb, var(--bp-c2, #D95838) 42%, transparent), transparent 70%); opacity: .38; }
.fr-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bp-c, #D6492E) 46%, transparent), transparent); }

.fr-hero-shell { position: relative; z-index: 2; }
.fr-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: center; }
.fr-hero-copy { max-width: 760px; }
.fr-hero-copy .bp-kicker { margin-bottom: 22px; }
.fr-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(42px, 5.6vw, 70px);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0 0 18px;
  font-weight: 800;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
}
.fr-hero-title em { font-style: normal; text-shadow: 0 0 34px color-mix(in srgb, var(--bp-c, #D6492E) 45%, transparent), 0 2px 16px rgba(0,0,0,.55); }
.fr-hero-desc { font-size: 17px; line-height: 1.65; color: var(--tim-slate, #C0B4A4); max-width: 560px; margin: 0 0 26px; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.fr-hero-desc + .bp-actions { margin-bottom: 22px; }
.fr-hero-copy .bp-badges { margin-top: 4px; }

/* — badge GARANTIE 50 ANS — */
.fr-g50 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px 30px 30px;
  border-radius: 28px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 44px 90px -36px rgba(0,0,0,.85);
  overflow: hidden;
  text-align: center;
}
.fr-badge-ring { position: absolute; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--bp-c, #D6492E) 55%, transparent); }
.fr-badge-ring-1 { width: 240px; height: 240px; animation: fr-spin 36s linear infinite; }
.fr-badge-ring-2 { width: 320px; height: 320px; opacity: .5; animation: fr-spin 50s linear infinite reverse; }
.fr-g50-logo { position: relative; z-index: 2; max-width: 200px; max-height: 96px; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0,0,0,.5)); }
.fr-g50-number {
  position: relative;
  z-index: 2;
  font-family: var(--font-heading);
  font-size: clamp(96px, 12vw, 140px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--bp-c, #D6492E);
  text-shadow: 0 0 46px color-mix(in srgb, var(--bp-c, #D6492E) 55%, transparent);
  margin: 8px 0 0;
}
.fr-g50-word {
  position: relative;
  z-index: 2;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #fff;
  margin: -2px 0 0;
}
.fr-g50-chip {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--bp-c, #D6492E) 84%, #000);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--bp-c, #D6492E) 38%, transparent);
}
.fr-g50-sub {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tim-slate, #C0B4A4);
}

/* — ticker — */
.fr-hero + .ticker-band .ticker-item span { color: var(--bp-c, #D6492E); }
.fr-hero + .ticker-band .ticker-item b { font-weight: 800; }

/* — boutons hero Feroof dans la palette — */
.fr-hero .el-btn-gold {
  background: linear-gradient(120deg, var(--bp-c) 0%, var(--bp-c2) 100%);
  color: var(--bp-c-text) !important;
  box-shadow: 0 16px 38px -14px color-mix(in srgb, var(--bp-c) 75%, transparent);
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.fr-hero .el-btn-gold:hover {
  transform: translateY(-4px) scale(1.03);
  color: var(--bp-c-text) !important;
  box-shadow: 0 24px 52px -16px color-mix(in srgb, var(--bp-c) 90%, transparent);
}
.fr-hero .el-btn-gold::after { background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent); }
.fr-hero .el-btn-ghost:hover { background: var(--bp-c); border-color: var(--bp-c); color: var(--bp-c-text) !important; }
.fr-hero .el-btn-ghost {
  background: rgba(255,255,255,.12);
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.55);
}

/* — sections avantage (alternées) — */
.fr-benefit { background: var(--tim-light, #060A14); padding: 96px 0 100px; }
.fr-benefit-alt { background: var(--tim-light-mid, #0B1224); }
.fr-benefit-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.fr-benefit-alt .fr-benefit-grid { grid-template-columns: 1.05fr 1fr; }
.fr-benefit-alt .fr-benefit-media { order: 2; }
.fr-benefit-media { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3.1; background: #10151F; border: 1px solid rgba(255,255,255,.07); }
.fr-benefit-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.fr-benefit-media:hover img { transform: scale(1.04); }
.fr-benefit-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--bp-c, #D6492E) 88%, #000);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.fr-benefit-copy { display: flex; flex-direction: column; }
.fr-benefit-copy .el-kicker { margin-bottom: 16px; }
.fr-h2 { color: var(--tim-text-dark, #FFF7EC) !important; }
.fr-h2 span { text-shadow: 0 0 30px color-mix(in srgb, var(--bp-c, #D6492E) 40%, transparent); }
.fr-benefit-intro { font-size: 15.5px; line-height: 1.65; color: var(--tim-slate, #C0B4A4); margin: 14px 0 22px; }
.fr-benefit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.fr-benefit-list li {
  position: relative;
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fr-benefit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bp-c, #D6492E) 80%, #000);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bp-c, #D6492E) 18%, transparent);
}
.fr-benefit-list b { font-size: 14.5px; color: var(--tim-text-dark, #FFF7EC); font-weight: 800; }
.fr-benefit-list span { font-size: 13.5px; line-height: 1.6; color: var(--tim-slate, #C0B4A4); }
.fr-univers-note { max-width: 440px; color: var(--tim-slate, #C0B4A4); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* — badge 50 ans inline (section durabilité) — */
.fr-g50-inline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  padding: 16px 20px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--bp-c, #D6492E) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--bp-c, #D6492E) 38%, transparent);
}
.fr-g50-inline-num {
  font-family: var(--font-heading);
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
  color: var(--bp-c, #D6492E);
}
.fr-g50-inline-txt { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--tim-slate, #C0B4A4); }
.fr-g50-inline-txt b { color: var(--tim-text-dark, #FFF7EC); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }

/* — galerie finitions — */
.fr-tiles { background: var(--tim-light-mid, #0B1224); padding: 96px 0 110px; }
.fr-tiles .bp-catalog-head { margin-bottom: 40px; }
.fr-tiles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fr-tile {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #10151F;
  border: 1px solid rgba(255,255,255,.07);
  transition: transform .3s ease, border-color .3s ease;
}
.fr-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--bp-c, #D6492E) 46%, transparent); }
.fr-tile img { width: 100%; aspect-ratio: 6 / 7; object-fit: cover; display: block; background: #fff; }
.fr-tile figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; }
.fr-tile figcaption b { font-size: 13.5px; color: var(--tim-text-dark, #FFF7EC); font-weight: 700; }
.fr-tile figcaption span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--bp-c, #D6492E); }

/* — avantages — */
.fr-perks { background: var(--tim-light, #060A14); padding: 96px 0 110px; }
.fr-perks .bp-catalog-head { margin-bottom: 40px; }
.fr-perks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.fr-perk {
  padding: 28px 24px;
  border-radius: 18px;
  background: var(--tim-navy, #0B1224);
  border: 1px solid rgba(255,255,255,.07);
  transition: transform .3s ease, border-color .3s ease;
}
.fr-perk:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--bp-c, #D6492E) 46%, transparent); }
.fr-perk-ic {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bp-c, #D6492E) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--bp-c, #D6492E) 40%, transparent);
}
.fr-perk-ic img { width: 38px; height: 38px; object-fit: contain; }
.fr-perk b { display: block; font-size: 16px; color: var(--tim-text-dark, #FFF7EC); font-weight: 800; margin-bottom: 8px; }
.fr-perk p { font-size: 13px; line-height: 1.6; color: var(--tim-slate, #C0B4A4); margin: 0; }

/* — catalogue — */
.fr-catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.fr-prod {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(16,52,108,.1);
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.fr-prod:hover { transform: translateY(-6px); box-shadow: 0 28px 55px -24px color-mix(in srgb, var(--bp-c, #D6492E) 32%, #000); text-decoration: none; }
.fr-prod-media { position: relative; aspect-ratio: 1 / 1; background: #f2f6fc; display: grid; place-items: center; overflow: hidden; }
.fr-prod-media img { max-width: 88%; max-height: 88%; object-fit: contain; transition: transform .45s ease; }
.fr-prod:hover .fr-prod-media img { transform: scale(1.06); }
.fr-prod-cat {
  position: absolute; left: 10px; bottom: 10px;
  padding: 5px 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--bp-c, #D6492E) 90%, #000);
  border-radius: 999px;
}
.fr-prod-body { padding: 14px 16px 18px; border-top: 1px solid rgba(16,52,108,.07); }
.fr-prod-title { display: block; font-size: 14.5px; line-height: 1.35; color: #10141c; font-weight: 700; }
.fr-prod-link { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--bp-c, #D6492E); }
.fr-prod-link i { font-style: normal; }

@keyframes fr-spin { to { transform: rotate(360deg); } }

@media (max-width: 1080px) {
  .fr-hero-photo { display: none; }
  .fr-sld-arrow { width: 46px !important; height: 46px !important; padding: 0 !important; font-size: 26px; }
  .fr-benefit-grid, .fr-benefit-alt .fr-benefit-grid { grid-template-columns: 1fr; gap: 36px; }
  .fr-benefit-media { aspect-ratio: 16 / 9; }
  .fr-benefit-alt .fr-benefit-media { order: 0; }
  .fr-perks-grid { grid-template-columns: 1fr 1fr; }
  .fr-tiles-grid { grid-template-columns: 1fr 1fr; }
  .fr-catalog-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .fr-hero { padding: 120px 0 70px; }
  .fr-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .fr-sld-arrow { display: none !important; }
  .fr-sld-dots { bottom: 20px; }
  .fr-badge-ring { display: none; }
  .fr-g50 { flex-direction: row; flex-wrap: wrap; text-align: left; padding: 22px 26px; }
  .fr-g50-number { font-size: 74px; }
  .fr-g50-logo { max-width: 160px; }
  .fr-catalog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .fr-perks-grid, .fr-tiles-grid, .fr-catalog-grid { grid-template-columns: 1fr; }
  .fr-benefit { padding: 72px 0 76px; }
  .fr-hero-title { font-size: clamp(34px, 10vw, 48px); }
  .fr-hero-desc { font-size: 15px; }
  .fr-g50 { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   AKFIX — variante éditoriale « Master of Solutions »
   (produits chimiques de construction, accent rouge carmin de la charte)
   ========================================================================== */

.ak-hero {
  position: relative;
  min-height: 620px;
  padding: 150px 0 90px;
  color: var(--tim-text-dark, #FFF7EC);
  background:
    radial-gradient(1100px 620px at 18% -10%, color-mix(in srgb, var(--bp-c, #BE0020) 34%, transparent), transparent 62%),
    linear-gradient(160deg, #17171c 0%, #0d0d12 55%, #07070b 100%);
  overflow: hidden;
  isolation: isolate;
}
.ak-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ak-hero-slide {
  position: absolute;
  right: -6%;
  top: -6%;
  width: 58%;
  height: 112%;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(270deg, #000 48%, transparent 90%);
  mask-image: linear-gradient(270deg, #000 48%, transparent 90%);
  opacity: .42;
  filter: saturate(.92);
}
.ak-hero-slide-2 { right: 16%; top: 10%; width: 42%; height: 90%; opacity: .18; -webkit-mask-image: linear-gradient(292deg, #000 34%, transparent 84%); mask-image: linear-gradient(292deg, #000 34%, transparent 84%); }
.ak-hero-slide-3 { right: -2%; bottom: -10%; top: auto; height: 62%; width: 40%; opacity: .14; -webkit-mask-image: linear-gradient(10deg, #000 30%, transparent 82%); mask-image: linear-gradient(10deg, #000 30%, transparent 82%); }
.ak-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(720px 460px at 78% 18%, #000 20%, transparent 72%);
  mask-image: radial-gradient(720px 460px at 78% 18%, #000 20%, transparent 72%);
}
.ak-orbe { position: absolute; border-radius: 50%; filter: blur(12px); }
.ak-orbe-1 { width: 300px; height: 300px; left: -80px; bottom: -60px; background: radial-gradient(circle, color-mix(in srgb, var(--bp-c, #BE0020) 44%, transparent), transparent 70%); }
.ak-orbe-2 { width: 230px; height: 230px; right: 30%; bottom: 6%; background: radial-gradient(circle, color-mix(in srgb, var(--bp-c2, #BE465A) 40%, transparent), transparent 70%); opacity: .34; }
.ak-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bp-c, #BE0020) 48%, transparent), transparent); }

.ak-hero-shell { position: relative; z-index: 2; }
.ak-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 48px; align-items: center; }
.ak-hero-copy { max-width: 780px; }
.ak-hero-copy .bp-kicker { margin-bottom: 22px; }
.ak-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(40px, 5.6vw, 70px);
  line-height: 1.03;
  letter-spacing: -.015em;
  margin: 0 0 18px;
  font-weight: 800;
  text-wrap: balance;
}
.ak-hero-title em { font-style: normal; text-shadow: 0 0 36px color-mix(in srgb, var(--bp-c, #BE0020) 48%, transparent); }
.ak-hero-desc { font-size: 17px; line-height: 1.65; color: var(--tim-slate, #C6C6CC); max-width: 590px; margin: 0 0 26px; }
.ak-hero-desc + .bp-actions { margin-bottom: 22px; }
.ak-hero-copy .bp-badges { margin-top: 4px; }

.ak-hero-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 46px 40px 40px;
  border-radius: 26px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 44px 90px -36px rgba(0,0,0,.85);
  overflow: hidden;
}
.ak-badge-ring { position: absolute; width: 230px; height: 230px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--bp-c, #BE0020) 55%, transparent); animation: ak-spin 36s linear infinite; }
.ak-badge-ring-2 { width: 310px; height: 310px; opacity: .5; animation: ak-spin 52s linear infinite reverse; }
.ak-hero-logo { position: relative; z-index: 2; max-width: 220px; max-height: 120px; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0,0,0,.5)); }
.ak-badge-chip {
  position: relative;
  z-index: 2;
  margin-top: 4px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--bp-c, #BE0020) 82%, #000);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--bp-c, #BE0020) 38%, transparent);
}

/* — ticker Akfix — */
.ak-ticker .ticker-item img { object-fit: cover; border-radius: 12px; }
.ak-ticker .ticker-item span { color: var(--bp-c, #BE0020); }

/* — boutons hero Akfix dans la palette — */
.ak-hero .el-btn-gold {
  background: linear-gradient(120deg, var(--bp-c) 0%, var(--bp-c2) 100%);
  color: var(--bp-c-text) !important;
  box-shadow: 0 16px 38px -14px color-mix(in srgb, var(--bp-c) 75%, transparent);
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.ak-hero .el-btn-gold:hover {
  transform: translateY(-4px) scale(1.03);
  color: var(--bp-c-text) !important;
  box-shadow: 0 24px 52px -16px color-mix(in srgb, var(--bp-c) 90%, transparent);
}
.ak-hero .el-btn-gold::after { background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent); }
.ak-hero .el-btn-ghost:hover { background: var(--bp-c); border-color: var(--bp-c); color: var(--bp-c-text) !important; }
.ak-hero .el-btn-ghost {
  background: rgba(255,255,255,.12);
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.55);
}

/* — familles — */
.ak-cats { background: var(--tim-light, #0b0b10); padding: 96px 0 110px; }
.ak-cats-note { max-width: 440px; color: var(--tim-slate, #C6C6CC); font-size: 14.5px; line-height: 1.6; margin: 0; }
.ak-cats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ak-cat {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: var(--tim-navy, #14141a);
  border: 1px solid rgba(255,255,255,.07);
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ak-cat:hover { transform: translateY(-6px); text-decoration: none; border-color: color-mix(in srgb, var(--bp-c, #BE0020) 46%, transparent); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--bp-c, #BE0020) 42%, #000); }
.ak-cat-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #101016; }
.ak-cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ak-cat:hover .ak-cat-media img { transform: scale(1.06); }
.ak-cat-num {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #fff;
  background: color-mix(in srgb, var(--bp-c, #BE0020) 88%, #000);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ak-cat-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 20px 22px 22px; }
.ak-cat-body b { font-size: 17px; line-height: 1.25; color: var(--tim-text-dark, #FFF7EC); font-weight: 800; }
.ak-cat-body p { font-size: 13px; line-height: 1.6; color: var(--tim-slate, #C6C6CC); margin: 0; }
.ak-cat-link { margin-top: auto; padding-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--bp-c, #BE0020); }
.ak-cat-link i { font-style: normal; }

/* — applications — */
.ak-apps { background: var(--tim-light-mid, #14141a); padding: 96px 0 110px; }
.ak-apps .bp-catalog-head { margin-bottom: 40px; }
.ak-apps-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.ak-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 22px 14px;
  border-radius: 16px;
  background: var(--tim-navy, #0b0b10);
  border: 1px solid rgba(255,255,255,.07);
  transition: transform .3s ease, border-color .3s ease;
}
.ak-app:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--bp-c, #BE0020) 46%, transparent); }
.ak-app img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.ak-app b { font-size: 12px; line-height: 1.4; color: var(--tim-text-dark, #FFF7EC); font-weight: 700; }

/* — galerie références — */
.ak-prods { background: var(--tim-light, #0b0b10); padding: 96px 0 110px; }
.ak-prods .bp-catalog-head { margin-bottom: 40px; }
.ak-prods-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ak-prod {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(16,52,108,.1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ak-prod:hover { transform: translateY(-6px); box-shadow: 0 28px 55px -24px color-mix(in srgb, var(--bp-c, #BE0020) 34%, #000); }
.ak-prod-media { position: relative; aspect-ratio: 3 / 4; background: #f4f5f7; display: grid; place-items: center; overflow: hidden; }
.ak-prod-media img { max-width: 82%; max-height: 90%; object-fit: contain; transition: transform .45s ease; }
.ak-prod:hover .ak-prod-media img { transform: scale(1.06); }
.ak-prod-cat {
  position: absolute; left: 10px; bottom: 10px;
  padding: 5px 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--bp-c, #BE0020) 90%, #000);
  border-radius: 999px;
}
.ak-prod-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 18px; border-top: 1px solid rgba(16,52,108,.07); }
.ak-prod-title { display: block; font-size: 14px; line-height: 1.35; color: #10141c; font-weight: 700; }
.ak-prod-ref { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--bp-c, #BE0020) 70%, #7a8aa0); }

@keyframes ak-spin { to { transform: rotate(360deg); } }

@media (max-width: 1080px) {
  .ak-hero-slide { width: 72%; right: -16%; }
  .ak-apps-grid { grid-template-columns: repeat(4, 1fr); }
  .ak-prods-grid { grid-template-columns: repeat(3, 1fr); }
  .ak-cats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .ak-hero { padding: 120px 0 70px; }
  .ak-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .ak-hero-badge { flex-direction: row; justify-content: flex-start; padding: 24px 28px; }
  .ak-hero-logo { max-width: 170px; }
  .ak-badge-ring { display: none; }
  .ak-prods-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .ak-cats-grid, .ak-apps-grid, .ak-prods-grid { grid-template-columns: 1fr; }
  .ak-hero-title { font-size: clamp(34px, 10vw, 48px); }
  .ak-hero-desc { font-size: 15px; }
  .ak-hero-badge { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   PAGES CATÉGORIE PRODUITS — taxonomy-product_cat.php
   Design sobre/fonctionnel, distinct des pages marques (hero glassbox/ticker/stats)
   ========================================================================== */

/* — bannière catégorie — */
.cc-banner {
  position: relative;
  padding: 100px 0 80px;
  background: var(--tim-dark-alt, #0a0f1e);
  overflow: hidden;
}
.cc-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cc-banner-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  opacity: .12;
  filter: saturate(.6) blur(2px);
}
.cc-banner-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--tim-dark-alt, #0a0f1e) 0%, transparent 55%);
}
.cc-banner-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 56px);
}
.cc-banner-copy { flex: 1 1 60%; }
.cc-banner-kicker {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bp-c, #FF7900);
  margin-bottom: 10px;
  padding: 5px 12px;
  background: color-mix(in srgb, var(--bp-c, #FF7900) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--bp-c, #FF7900) 25%, transparent);
  border-radius: 999px;
}
.cc-banner-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.08;
  color: var(--tim-text, #FFF7EC);
  margin: 0 0 12px;
}
.cc-banner-desc {
  font-family: var(--font-body);
  font-size: clamp(14.5px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--tim-slate, #7a8aa0);
  max-width: 520px;
}
.cc-banner-art { flex: 0 0 auto; position: relative; }
.cc-banner-img-card {
  width: clamp(120px, 18vw, 200px);
  height: clamp(120px, 18vw, 200px);
  object-fit: cover;
  border-radius: 22px;
  border: 2px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

/* — catalogue — */
.cc-catalog {
  background: var(--tim-light, #060a14);
  padding: 70px 0 80px;
}
.bp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 22px;
  margin: 4px 0 26px;
  padding: 16px 20px;
  border: var(--glass-border);
  border-radius: var(--glass-radius-sm);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}
.bp-sort { display: inline-flex; align-items: center; gap: 10px; }
.bp-sort label {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tim-slate);
  white-space: nowrap;
}
.bp-sort select {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tim-text);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--tim-border);
  border-radius: 10px;
  padding: 9px 34px 9px 13px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--bp-c, #FF7900) 50%),
    linear-gradient(135deg, var(--bp-c, #FF7900) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.bp-sort select:focus {
  outline: none;
  border-color: var(--bp-c, #FF7900);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-c, #FF7900) 22%, transparent);
}
.bp-sort select:hover { border-color: color-mix(in srgb, var(--bp-c, #FF7900) 60%, var(--tim-border)); }
.bp-sort select option { background: var(--tim-navy); color: var(--tim-text); }
.bp-result-count {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tim-slate);
  margin: -6px 0 18px;
}

/* — CTA devis catégorie — */
.cc-cta {
  background: linear-gradient(135deg, var(--tim-dark-alt, #0a0f1e) 0%, var(--tim-navy, #0b0b10) 100%);
  padding: 72px 0;
  border-top: 1px solid rgba(255,255,255,.04);
}
.cc-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  padding: 40px 44px;
  border: var(--glass-border);
  border-radius: 22px;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--glass-shadow);
}
.cc-cta-copy { flex: 1 1 55%; }
.cc-cta-kicker {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bp-c, #FF7900);
  margin-bottom: 8px;
}
.cc-cta-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  color: var(--tim-text, #FFF7EC);
  margin: 0 0 10px;
}
.cc-cta-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--tim-slate, #7a8aa0);
  margin: 0;
  max-width: 480px;
}
.cc-cta-actions { flex: 0 0 auto; display: flex; gap: 12px; flex-wrap: wrap; }

/* — autres catégories — */
.cc-others {
  background: var(--tim-light, #060a14);
  padding: 0 0 90px;
}
.cc-others-kicker {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bp-c, #FF7900);
  margin-bottom: 22px;
}
.cc-others-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.cc-other {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 22px 14px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
  text-decoration: none;
}
.cc-other:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--bp-c, #FF7900) 40%, transparent);
  background: rgba(255,255,255,.05);
}
.cc-other-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  overflow: hidden;
}
.cc-other-icon img { width: 42px; height: 42px; object-fit: contain; }
.cc-other-mono {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--bp-c, #FF7900);
}
.cc-other-name {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tim-text, #FFF7EC);
  line-height: 1.3;
}
.cc-other-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--tim-slate, #7a8aa0);
  letter-spacing: .03em;
}

/* — responsive — */
@media (max-width: 981px) {
  .cc-banner { padding: 80px 0 60px; }
  .cc-banner-inner { flex-direction: column; text-align: center; }
  .cc-banner-art { order: -1; }
  .cc-banner-desc { margin-left: auto; margin-right: auto; }
  .cc-cta-inner { flex-direction: column; text-align: center; padding: 32px 28px; }
  .cc-cta-text { margin-left: auto; margin-right: auto; }
  .cc-cta-actions { justify-content: center; }
  .bp-toolbar { flex-direction: column; align-items: stretch; }
}
@media (max-width: 620px) {
  .cc-banner { padding: 60px 0 40px; }
  .cc-banner-img-card { width: 100px; height: 100px; border-radius: 16px; }
  .cc-others-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
}

/* � Suppression de la ligne verticale de s�paration de la sidebar (template Divi/WooCommerce) � */
body.woocommerce-shop #main-content .container:before,
body.woocommerce-archive #main-content .container:before {
  display: none !important;
}


/* --- Masque le fil d'Ariane WooCommerce (Accueil / Boutique) --- */
body.woocommerce-shop .woocommerce-breadcrumb,
body.woocommerce-archive .woocommerce-breadcrumb {
  display: none !important;
}


/* --- Respiration entre la barre de tri et le catalogue produits --- */
body.woocommerce-page #left-area > ul.products {
  margin-top: 26px !important;
}


/* ==========================================================================
   SURFACES CLAIRES (#FEFEFE & équivalents) — quadrillage + texte contrasté
   Objectif : éviter un fond blanc totalement uni et rendre le texte
   parfaitement visible et coloré (contraste fort).
   ========================================================================== */
.section-white,
.bp-toolbar,
.bp-cta,
.bp-others,
.cc-cta,
.cc-others {
  background-color: #FEFEFE !important;
  background-image:
    radial-gradient(130% 90% at 8% 0%, rgba(255,121,0,.12), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(241,110,0,.08), transparent 55%),
    linear-gradient(rgba(4,6,12,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4,6,12,.06) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px !important;
  background-position: 0 0, 0 0, 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat !important;
}

/* .bp-cta : texte posé directement sur le fond clair */
.bp-cta { color: #1B2333 !important; }
.bp-cta h1, .bp-cta h2, .bp-cta h3, .bp-cta-title {
  color: #E85D00 !important;
  -webkit-text-fill-color: #E85D00 !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}
.bp-cta p, .bp-cta-text {
  color: #333A45 !important;
  -webkit-text-fill-color: #333A45 !important;
}
.bp-cta .bp-kicker-light {
  color: #B34400 !important;
  -webkit-text-fill-color: #B34400 !important;
}
.bp-cta .bp-kicker-light::before {
  background: #E85D00 !important;
  box-shadow: none !important;
}

/* .bp-others : cartes blanches, nom hérité sombre */
.bp-others { color: #1B2333 !important; }
.bp-others h2, .bp-others h3 { color: #E85D00 !important; -webkit-text-fill-color: #E85D00 !important; }
.bp-others-head { color: #B34400 !important; -webkit-text-fill-color: #B34400 !important; }
.bp-others p { color: #333A45 !important; -webkit-text-fill-color: #333A45 !important; }

/* .bp-toolbar : contrôles sur fond clair */
.bp-toolbar { color: #1B2333 !important; }
.bp-toolbar .bp-sort label,
.bp-toolbar .bp-result-count { color: #333A45 !important; }
.bp-toolbar input, .bp-toolbar select {
  color: #1B2333 !important;
  background-color: #fff !important;
}

/* .section-white : titres très colorés + texte sombre et net */
.section-white h1, .section-white h2, .section-white h3 {
  color: #E85D00 !important;
  -webkit-text-fill-color: #E85D00 !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}
.section-white p, .section-white li, .section-white h4 {
  color: #1B2333 !important;
  -webkit-text-fill-color: #1B2333 !important;
}
.section-white a { color: #E85D00; }
.section-white a:hover { color: #B34400; }
.section-white input, .section-white textarea, .section-white select {
  color: #1B2333 !important;
  background-color: #fff !important;
}
.section-white input::placeholder, .section-white textarea::placeholder {
  color: #8A93A0 !important;
}
.section-white .tim-cat-card h4,
.section-white .tim-brand-item span {
  color: #FF8A2B !important;
  -webkit-text-fill-color: #FF8A2B !important;
}
.section-white .tim-testimonial-author-info p {
  color: #5B6472 !important;
}

/* .cc-cta : panneau clair (on neutralise la carte sombre héritée de style.css) */
.cc-cta-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.cc-cta-title {
  color: #E85D00 !important;
  -webkit-text-fill-color: #E85D00 !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}
.cc-cta-text {
  color: #333A45 !important;
  -webkit-text-fill-color: #333A45 !important;
}
.cc-cta-kicker {
  color: #B34400 !important;
  -webkit-text-fill-color: #B34400 !important;
}

/* .cc-others : tuiles blanches -> texte sombre */
.cc-others-kicker {
  color: #B34400 !important;
  -webkit-text-fill-color: #B34400 !important;
}
.cc-others .cc-other { border: 1px solid rgba(4,6,12,.08) !important; }
.cc-others .cc-other-name {
  color: #1B2333 !important;
  -webkit-text-fill-color: #1B2333 !important;
}
.cc-others .cc-other-count {
  color: #5B6472 !important;
  -webkit-text-fill-color: #5B6472 !important;
}

/* Liens des panneaux clairs */
.bp-cta a:not(.el-btn), .cc-cta a:not(.el-btn) { color: #E85D00; }

/* Boutons des CTA clairs : lisibles sur fond clair */
.bp-cta .el-btn-ghost,
.cc-cta .el-btn-ghost {
  color: #1B2333 !important;
  -webkit-text-fill-color: #1B2333 !important;
  border: 1.5px solid rgba(4,6,12,.35) !important;
  background: rgba(4,6,12,.03) !important;
}
.bp-cta .el-btn-ghost:hover,
.cc-cta .el-btn-ghost:hover {
  background: #E85D00 !important;
  border-color: #E85D00 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* .cc-cta : base des boutons (le template n'en fournissait aucune) */
.cc-cta-actions .el-btn {
  display: inline-block;
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-heading);
  text-decoration: none !important;
  line-height: 1.2;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.cc-cta .el-btn-gold {
  background-color: #F87503 !important;
  background-image: none !important;
  color: #04060C !important;
  -webkit-text-fill-color: #04060C !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 14px 34px -14px rgba(248,117,3,.75);
}
.cc-cta .el-btn-gold:hover {
  background-color: #E57207 !important;
  background-image: none !important;
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -16px rgba(248,117,3,.9);
}

/* ============ #F87503 PLEIN : boutons gold + pastilles du menu ============ */
.el-btn-gold,
.el-btn-gold.el-btn-gold {
  background-color: #F87503 !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #04060C !important;
  -webkit-text-fill-color: #04060C !important;
}
.el-btn-gold::after,
.el-btn-gold.el-btn-gold::after {
  display: none !important;
}
.el-btn-gold:hover,
.el-btn-gold.el-btn-gold:hover {
  background-color: #E57207 !important;
  background-image: none !important;
  color: #04060C !important;
  -webkit-text-fill-color: #04060C !important;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 24px 52px -16px rgba(248,117,3,.6) !important;
}

/* Pastilles du menu -> #F87503 plein (remplace le blanc 30% + dégradé or) */
#main-header #top-menu > li > a,
.site-header .main-navigation .primary-menu-container > ul > li.menu-item > a {
  background-color: #F87503 !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #04060C !important;
}
#main-header #top-menu > li > a:hover,
#main-header #top-menu > li.current-menu-item > a,
#main-header #top-menu > li.current-menu-ancestor > a,
.site-header .main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
  background-color: #E57207 !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #04060C !important;
  box-shadow: 0 6px 16px -6px rgba(248,117,3,.55), 0 0 0 4px rgba(248,117,3,.16) !important;
}




/* =========================================================================
   104. HEADER — CTA « Demander un devis » supprimé définitivement
   (règles .tim-hdr-cta* retirées ; le header n'injecte plus de CTA).
   ========================================================================= */
/* ---------------------------------------------------------------------------
   NEUTRALISATION — CTA « Demander un devis » retiré du header (décision client :
   aucun CTA natif du thème .cmc-dv-cta ni injection serveur → header épuré).
   --------------------------------------------------------------------------- */
#et-top-navigation .cmc-dv-cta,
.et-top-navigation .cmc-dv-cta,
.cmc-dv-cta { display: none !important; }


/* ---------------------------------------------------------------------------
   104.2 PASTILLES DU MENU — fond transparent + texte ORANGE (sélecteurs natifs
   Divi .et-menu-nav / #et-top-navigation).
   --------------------------------------------------------------------------- */
#et-top-navigation .et-menu-nav > ul > li > a,
#et-top-navigation ul.et-menu > li > a,
#top-menu > li > a,
#et-secondary-menu .et-menu-nav li a,
.et_pb_menu__menu nav > ul > li > a{
    background:transparent !important;
    color:#F87503 !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
}
#et-top-navigation .et-menu-nav > ul > li > a:hover,
#et-top-navigation ul.et-menu > li > a:hover,
#top-menu > li > a:hover,
#et-secondary-menu .et-menu-nav li a:hover,
.et_pb_menu__menu nav > ul > li > a:hover{
    background:rgba(248,117,3,.06) !important;
    color:#FF9A3D !important;
}
#et-top-navigation .et-menu-nav > ul > li.current-menu-item > a,
#et-top-navigation ul.et-menu > li.current-menu-item > a,
#top-menu > li.current-menu-item > a,
.et_pb_menu__menu nav > ul > li.current-menu-item > a{
    color:#F87503 !important;
    font-weight:700;
}/* ---------------------------------------------------------------------------
   104.2-bis MENU PRINCIPAL (#top-menu — Accueil/Boutique/Marques/Contact/À propos)
   → pastilles TRANSPARENTES + texte ORANGE (sélecteur natif réel de Divi).
   --------------------------------------------------------------------------- */
#top-menu > li > a,
#top-menu li a{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #F87503 !important;
    text-decoration: none;
}
#top-menu > li > a:hover,
#top-menu li a:hover{
    color: #FFA64D !important;
    background: rgba(248,117,3,.07) !important;
    border-radius: 6px;
}
#top-menu > li.current-menu-item > a,
#top-menu li.current-menu-item > a{
    color: #FFa64default !important;
    font-weight: 800 !important;
}
/* ---------------------------------------------------------------------------
   104.3 DERNIER NIVEAU — les pastilles du menu peuvent être portées par le LI
   lui-même (Divi), pas seulement le A → on neutralise le fond/bordures sur li.
   --------------------------------------------------------------------------- */
#top-menu > li,
#top-menu li,
#et-top-navigation .et-menu-nav > ul > li,
#et-top-navigation ul.et-menu > li,
.et_pb_menu__menu nav > ul > li{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#top-menu > li > a,
#top-menu li a{
    background: transparent !important;
    color: #F87503 !important;
}

/* =========================================================================
   106. SIDEBAR PRODUIT — vrai menu de navigation (catégories + marques).
   Fichier : Divi-Child/sidebar.php (fiches produit uniquement).
   ========================================================================= */
.tim-side-nav{ display:flex; flex-direction:column; gap:24px; }
.tim-side-block{ }
.tim-side-title{
    margin:0 0 10px; padding-bottom:10px;
    font-family:var(--font-body,inherit); font-size:11px; font-weight:800;
    letter-spacing:.18em; text-transform:uppercase;
    color:var(--fx-c,#FF7900);
    border-bottom:1px solid rgba(255,255,255,.09);
}
.tim-side-list{
    margin:0; padding:0; list-style:none;
    display:flex; flex-direction:column; gap:2px;
}
.tim-side-list li{ margin:0; padding:0; }
.tim-side-link{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:8px 10px; border-radius:8px;
    color:rgba(255,255,255,.82); font-size:13px; font-weight:500; line-height:1.3;
    text-decoration:none;
    transition:background .2s ease, color .2s ease;
}
.tim-side-link:hover,
.tim-side-link:focus-visible{
    background:rgba(255,121,0,.12); color:#fff; text-decoration:none;
}
.tim-side-link.is-on{
    background:rgba(255,121,0,.16);
    color:var(--fx-c,#FF7900); font-weight:700;
    box-shadow:inset 0 0 0 1px rgba(255,121,0,.28);
}
.tim-side-n{
    font-style:normal; font-size:10.5px; font-weight:600;
    color:rgba(255,255,255,.45);
}
.tim-side-link:hover .tim-side-n,
.tim-side-link.is-on .tim-side-n{ color:rgba(255,255,255,.75); }
.tim-side-sub{
    margin:2px 0 4px; padding:0 0 0 14px; list-style:none;
    display:flex; flex-direction:column; gap:1px;
    border-left:1px solid rgba(255,121,0,.18);
}
.tim-side-sublink{ padding:6px 10px; font-size:12.5px; color:rgba(255,255,255,.66); }
.tim-side-sublink.is-on{ font-weight:600; }
.tim-side-brands{ flex-direction:row; flex-wrap:wrap; gap:4px; }
.tim-side-brands .tim-side-link{
    padding:6px 10px; font-size:12px; border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.03);
}
.tim-side-brands .tim-side-link:hover,
.tim-side-brands .tim-side-link.is-on{ border-color:rgba(255,121,0,.45); background:rgba(255,121,0,.1); }
.tim-side-brands .tim-side-n{ display:none; }