/* ================================================================
   EPI CÔTE D'IVOIRE — Fichier de design unique
   Chargé APRÈS styles.css pour overrider proprement
   Couleur principale : #e30613 (rouge)
   ================================================================ */

/* ---- Variables de marque ---- */
:root {
  --red:        #e30613;
  --red-dark:   #b8000f;
  --red-light:  #ff3344;
  --red-pale:   rgba(227,6,19,0.07);
  --dark:       #1a1a2e;
  --dark2:      #0f3460;
  --radius:     14px;
  --shadow:     0 8px 32px rgba(0,0,0,0.10);
  --tr:         all 0.3s ease;

  /* Aliases pour compatibilité avec les vues existantes */
  --epi-red:        #e30613;
  --epi-red-dark:   #b8000f;
  --epi-red-light:  #ff3344;
  --epi-red-pale:   #fff0f0;
  --epi-red-10:     rgba(227,6,19,0.10);
  --epi-red-20:     rgba(227,6,19,0.20);
  --epi-dark:       #1a1a2e;
  --epi-dark-2:     #16213e;
  --epi-dark-3:     #0f3460;
  --epi-gray:       #f8f9fa;
  --epi-gray-2:     #e9ecef;
  --epi-text:       #222222;
  --epi-text-muted: #6c757d;
  --epi-shadow:     0 8px 32px rgba(227,6,19,0.15);
  --epi-shadow-sm:  0 4px 16px rgba(0,0,0,0.10);
  --epi-shadow-lg:  0 16px 48px rgba(227,6,19,0.20);
  --epi-radius:     14px;
  --epi-radius-lg:  20px;
  --epi-radius-xl:  32px;
  --epi-transition: all 0.35s ease;

  /* Override du primary du thème */
  --primary: #e30613;
}

/* ---- Corps — fond clair visible ---- */
body {
  background: #edf0f7 !important;
  font-family: 'Inter', 'Albert Sans', system-ui, sans-serif;
  overflow-x: hidden;
}

/* Sélection rouge */
::selection { background: var(--red); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f0f0f5; }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 10px; }

/* ================================================================
   FOND ANIMÉ FIXE
   ================================================================ */
#epi-bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%,   rgba(227,6,19,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 0%   100%,  rgba(15,52,96,0.10) 0%, transparent 55%),
    linear-gradient(155deg, #eceff7 0%, #f5f2f3 50%, #edf0f7 100%);
}

#epi-particles-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.5;
}

.epi-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.epi-blob-1 {
  width: 600px; height: 600px;
  top: -180px; right: -160px;
  background: radial-gradient(circle, rgba(227,6,19,0.12) 0%, transparent 65%);
  filter: blur(80px);
  animation: bl1 28s ease-in-out infinite;
}
.epi-blob-2 {
  width: 540px; height: 540px;
  bottom: -160px; left: -140px;
  background: radial-gradient(circle, rgba(15,52,96,0.11) 0%, transparent 65%);
  filter: blur(70px);
  animation: bl2 32s ease-in-out infinite alternate;
}
.epi-blob-3 {
  width: 420px; height: 420px;
  top: 40%; left: 45%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(227,6,19,0.04) 0%, transparent 65%);
  filter: blur(90px);
  animation: bl3 20s ease-in-out infinite;
}
.epi-blob-4 {
  width: 300px; height: 300px;
  top: -40px; left: 25%;
  background: radial-gradient(circle, rgba(255,80,30,0.05) 0%, transparent 70%);
  filter: blur(60px);
  animation: bl4 16s ease-in-out infinite alternate-reverse;
}
.epi-bg-dots {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='1' cy='1' r='0.9' fill='rgba(80%2C90%2C130%2C0.13)'/%3E%3C/svg%3E");
  background-size: 30px 30px;
}

@keyframes bl1 { 0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(-50px,60px) scale(1.07)} 50%{transform:translate(-25px,110px) scale(.93)} 75%{transform:translate(45px,70px) scale(1.04)} }
@keyframes bl2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(70px,-80px) scale(1.1)} }
@keyframes bl3 { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-60%) scale(1.1)} }
@keyframes bl4 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(50px,35px) scale(1.12)} }

/* ================================================================
   WRAPPER
   ================================================================ */
#wrapper {
  position: relative;
  z-index: 1;
  background: transparent !important;
}
/* Bande rouge animée en haut */
#wrapper::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--red) 30%, var(--red-light) 50%, var(--red) 70%, transparent 100%);
  background-size: 200% 100%;
  animation: sweep 5s linear infinite;
  position: sticky;
  top: 0;
  z-index: 1001;
}
@keyframes sweep { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ================================================================
   TOPBAR — bande d'infos défilante (ligne unique, défilement)
   ================================================================ */
.epi-topbar {
  background: linear-gradient(90deg, #0d0d20 0%, #1a1a36 45%, #0f0f22 100%);
  border-bottom: 2px solid var(--red);
  position: relative;
  z-index: 1000;
  overflow: hidden;
  height: 34px;                     /* hauteur fixe : jamais de retour à la ligne */
}
.epi-topbar__inner {
  display: flex !important;
  flex-wrap: nowrap !important;     /* une seule ligne absolument */
  align-items: center !important;
  justify-content: space-between;
  height: 100%;
  gap: 16px;
}
.epi-topbar__marquee-wrap {
  flex: 1 1 0 !important;          /* prend l'espace disponible */
  overflow: hidden !important;
  min-width: 0 !important;
  height: 100%;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
/* Le track : flex + width:max-content = ne wrape jamais */
.epi-topbar__track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content;
  gap: 52px;
  animation: marquee-run 30s linear infinite;
  will-change: transform;
}
.epi-topbar__track:hover { animation-play-state: paused; }
.epi-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
.epi-topbar__item i    { color: #ff4455; font-size: 12px; flex-shrink: 0; }
.epi-topbar__item strong { color: #fff; }
/* Liens support/formations : ne rétrécissent pas */
.epi-topbar__links {
  display: flex !important;
  flex-shrink: 0 !important;
  align-items: center;
  gap: 14px;
}
.epi-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,.55);
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.epi-topbar__link:hover { color: #ff4455; }
.epi-topbar__sep {
  width: 1px; height: 12px;
  background: rgba(255,255,255,.15);
  flex-shrink: 0;
}
@keyframes marquee-run { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
@media (max-width: 900px) { .epi-topbar { display: none; } }

/* ================================================================
   HEADER PRINCIPAL
   ================================================================ */
.epi-header,
#header,
#header.header-default,
#header.header-style-2,
#header.header-style-4 {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 20px rgba(0,0,0,0.07) !important;
  transition: box-shadow .3s ease, background .3s ease !important;
  border: none !important;
  padding: 0 !important;
}
#header.scrolled {
  box-shadow: 0 2px 30px rgba(0,0,0,0.13) !important;
}

/* ---- Ligne principale : row flex robuste ---- */
.epi-header__main { padding: 0; }
#header .main-header.line,
.epi-header__main > .container {
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.epi-header__row {
  display: flex !important;
  flex-wrap: nowrap !important;     /* jamais de retour à la ligne */
  align-items: center !important;
  gap: 12px;
  padding: 8px 0;
  min-height: 70px;
}
/* Hamburger : gauche, ne rétrécit pas */
.epi-hamburger { flex-shrink: 0; }
/* Logo : fixe, ne rétrécit pas */
.epi-header__logo { flex: 0 0 auto; }
/* Recherche : taille fixe 300 px, ne grandit pas, pousse les actions via margin */
.epi-header__search {
  width: 100% !important;
  min-width: 0 !important;
  position: relative;
  /* petit espace avant les actions */
  margin-right: auto;
}
/* Actions : droite, ne rétrécit pas */
.epi-header__actions { flex: 0 0 auto; }

/* ---- Hamburger ---- */
.epi-hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  transition: background .2s;
}
.epi-hamburger:hover { background: rgba(227,6,19,.07); }
.epi-hamburger__bar {
  display: block;
  height: 2px;
  background: #2d2d2d;
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease, width .3s ease;
}
.epi-hamburger__bar:first-child  { width: 22px; }
.epi-hamburger__bar--mid         { width: 16px; }
.epi-hamburger__bar:last-child   { width: 20px; }
.epi-hamburger.open .epi-hamburger__bar:first-child  { width: 22px; transform: translateY(7px) rotate(45deg); }
.epi-hamburger.open .epi-hamburger__bar--mid         { opacity: 0; transform: translateX(-8px); }
.epi-hamburger.open .epi-hamburger__bar:last-child   { width: 22px; transform: translateY(-7px) rotate(-45deg); }

/* ---- Logo ---- */
.epi-header__logo {
  flex-shrink: 0;
}
.epi-header__logo .logo-header { text-decoration: none; display: inline-flex; align-items: center; }
.epi-header__logo .logo {
  max-height: 52px !important;
  width: auto;
  transition: transform 0.3s ease, filter 0.3s ease !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.07)) !important;
}
.epi-header__logo .logo-header:hover .logo { transform: scale(1.04) !important; }
#header .logo-header .logo {
  max-height: 62px !important;
  transition: transform 0.3s ease !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08)) !important;
  border-radius: 15px;
}
#header .logo-header:hover .logo { transform: scale(1.03) !important; }

/* La boîte de recherche occupe toute la largeur du div parent (300px) */
#header .tf-form-search,
.epi-header__search .tf-form-search {
  width: 100% !important;
  position: relative !important;
}
#header .tf-form-search .search-box {
  background: #f3f4f8 !important;
  border: 2px solid transparent !important;
  border-radius: 50px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  position: relative !important;  /* override theme's absolute positioning */
  transition: border-color .25s, box-shadow .25s, background .25s !important;
}
#header .tf-form-search .search-box:focus-within {
  background: #fff !important;
  border-color: var(--red) !important;
  box-shadow: 0 0 0 4px rgba(227,6,19,.07) !important;
}
#header .tf-form-search .search-box fieldset.text,
#header .tf-form-search .search-box fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 !important;
  min-width: 0 !important;
}
#header .tf-form-search .search-box input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  flex: 1 !important;
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  color: #333 !important;
}
#header .tf-form-search .search-box input::placeholder { color: #b0b4c0 !important; }
#header .tf-form-search .search-box button,
#header .tf-form-search .search-box .tf-btn {
  background: var(--red) !important;
  border: none !important;
  color: #fff !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  margin: 3px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  position: static !important;  /* annule position:absolute du thème */
  transform: none !important;
  top: auto !important; right: auto !important;
  transition: background .2s ease !important;
}
#header .tf-form-search .search-box button:hover,
#header .tf-form-search .search-box .tf-btn:hover {
  background: var(--red-dark) !important;
  transform: scale(1.06) !important;
}

/* Dropdown résultats recherche — positionné sous .epi-header__search */
#hdr-search-res.search-suggests-results {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 360px !important;          /* plus large que le champ pour plus de lisibilité */
  z-index: 400 !important;
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 44px rgba(0,0,0,0.14) !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}
#hdr-search-res ul { list-style: none; margin: 0; padding: 6px 0; }
#hdr-search-res .sr-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  text-decoration: none;
  transition: background .2s;
}
#hdr-search-res .sr-item:hover { background: rgba(227,6,19,.05); }
#hdr-search-res .sr-img {
  width: 44px; height: 44px; border-radius: 9px;
  overflow: hidden; flex-shrink: 0; background: #f4f4f4;
}
#hdr-search-res .sr-img img { width: 100%; height: 100%; object-fit: cover; }
#hdr-search-res .sr-name { font-size: 13px; font-weight: 600; color: #222; }
#hdr-search-res .sr-price { font-size: 12px; font-weight: 700; color: var(--red); margin-top: 2px; }
#hdr-search-res .sr-loading,
#hdr-search-res .sr-empty {
  padding: 14px 16px;
  font-size: 13px;
  color: #999;
  text-align: center;
  list-style: none;
}
#hdr-search-res .sr-more {
  display: block;
  padding: 10px 16px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--red);
  border-top: 1px solid #f2f2f2;
  text-decoration: none;
  transition: background .2s;
}
#hdr-search-res .sr-more:hover { background: rgba(227,6,19,.05); }

/* ---- Actions droite ---- */
.epi-header__actions { flex-shrink: 0; }
#header .nav-icon-item {
  color: #333 !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}
#header .nav-icon-item:hover {
  color: var(--red) !important;
  background: rgba(227,6,19,.07) !important;
}
#header .nav-icon-item i { font-size: 19px !important; }
.nav-icon-label { font-size: 13px; font-weight: 500; }

/* Avatar utilisateur */
.epi-user-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(227,6,19,.3) !important;
}

/* Bouton Devis */
.epi-btn-devis,
#header .nav-icon-item.btn.bg-danger,
#header a.btn.bg-danger {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 9px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(227,6,19,0.28) !important;
  transition: all 0.25s ease !important;
  letter-spacing: .1px !important;
  gap: 7px !important;
}
.epi-btn-devis:hover,
#header .nav-icon-item.btn.bg-danger:hover,
#header a.btn.bg-danger:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(227,6,19,0.42) !important;
  color: #fff !important;
  background: var(--red-dark) !important;
}

/* Badge panier */
.nav-icon-cart { position: relative !important; }
#header .nav-icon .count-box,
.nav-icon-cart .count-box {
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  background: var(--red) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  min-width: 17px !important;
  height: 17px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

/* Dropdown compte */
#header .dropdown-menu {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 52px rgba(0,0,0,0.14) !important;
  padding: 8px !important;
  overflow: hidden !important;
  min-width: 200px !important;
  margin-top: 6px !important;
}
#header .dropdown-item {
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 9px 14px !important;
  color: #333 !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
}
#header .dropdown-item:hover:not(.active) {
  background: rgba(227,6,19,.07) !important;
  color: var(--red) !important;
  padding-left: 18px !important;
}
#header .dropdown-item.active {
  background: linear-gradient(135deg, var(--red), var(--red-dark)) !important;
  color: #fff !important;
}
#header .dropdown-item--danger { color: #e53e3e !important; }
#header .dropdown-item--danger:hover {
  background: rgba(229,62,62,.08) !important;
  color: #c53030 !important;
}
#header .dropdown-divider { border-color: #f0f0f0 !important; margin: 4px 8px !important; }

/* ================================================================
   BARRE DE NAVIGATION — .epi-header__nav
   ================================================================ */
.epi-header__nav,
#header .header-bottom {
  background: rgba(255,255,255,0.98) !important;
  border-top: 1px solid rgba(0,0,0,0.055) !important;
}
#header .box-nav-ul .item-link {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  color: #333 !important;
  padding: 13px 8px !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: color 0.25s ease !important;
  text-transform: uppercase !important;
}
#header .box-nav-ul .item-link::after {
  content: '' !important;
  position: absolute !important;
  top: auto !important;
  bottom: 6px !important;
  left: 8px !important;
  right: 8px !important;
  width: auto !important;
  height: 2.5px !important;
  background: var(--red) !important;
  display: block !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  border-radius: 2px !important;
}
#header .box-nav-ul .item-link:hover,
#header .box-nav-ul .item-link.active { color: var(--red) !important; }
#header .box-nav-ul li:hover .item-link::after,
#header .box-nav-ul .item-link.active::after { transform: scaleX(1) !important; }

/* Catégorie parente non-navigable (span déclencheur de mega-menu) */
#header .box-nav-ul .item-link--trigger {
  cursor: default !important;
}
#header .box-nav-ul .item-link--trigger:hover {
  color: var(--red) !important;
}

/* Icônes nav (flèche bas) */
.epi-nav-grid-icon { font-size: 13px; }
.epi-nav-chev      { font-size: 9px; opacity: .55; margin-left: 2px; }

/* Catégories dropdown */
#header .categories-title {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  transition: color 0.2s ease !important;
  gap: 8px !important;
}
#header .categories-title:hover { color: var(--red) !important; }
#header .list-categories-inner {
  box-shadow: 0 24px 60px rgba(0,0,0,0.11) !important;
  border-radius: 0 0 18px 18px !important;
  border-top: 3px solid var(--red) !important;
}

/* Mega menu */
#header .sub-menu.mega-menu {
  border: none !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.10) !important;
  border-top: 3px solid var(--red) !important;
  padding: 24px 0 !important;
}
#header .mega-menu-item .menu-heading a {
  color: var(--red) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  display: block !important;
  margin-bottom: 8px !important;
}
#header .mega-menu-item .menu-link-text {
  font-size: 13px !important;
  color: #555 !important;
  padding: 5px 0 !important;
  display: block !important;
  transition: all 0.2s ease !important;
}
#header .mega-menu-item .menu-link-text:hover {
  color: var(--red) !important;
  padding-left: 8px !important;
}

/* ================================================================
   DRAWER MOBILE
   ================================================================ */
.epi-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(10,10,20,0.6);
  z-index: 1099;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}
.epi-drawer-overlay.open { opacity: 1; pointer-events: all; }

.epi-drawer {
  position: fixed;
  top: 0; left: 0;
  width: min(310px, 88vw);
  height: 100dvh;
  background: #fff;
  z-index: 1100;
  transform: translateX(-100%);
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 4px 0 32px rgba(0,0,0,0.18);
}
.epi-drawer.open { transform: translateX(0); }

/* Drawer — en-tête */
.drawer-head {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark2) 100%);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  border-bottom: 2px solid var(--red);
}
.drawer-logo { 
  height: 36px;
  border-radius: 10px;
}
.drawer-close {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,.8);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}
.drawer-close:hover { background: rgba(227,6,19,0.45); color: #fff; border-color: transparent; }

/* Drawer — recherche */
.drawer-search {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.drawer-search-inner {
  display: flex;
  align-items: center;
  background: #f3f4f8;
  border-radius: 50px;
  overflow: hidden;
  border: 1.5px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.drawer-search-inner:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(227,6,19,.07);
  background: #fff;
}
.drawer-search input {
  flex: 1; border: none; outline: none;
  padding: 9px 14px;
  font-size: 13px;
  background: transparent;
  color: #333;
  min-width: 0;
}
.drawer-search input::placeholder { color: #aaa; }
.drawer-search button {
  background: var(--red); border: none; color: #fff;
  width: 34px; height: 34px;
  border-radius: 50%;
  margin: 3px;
  cursor: pointer;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}
.drawer-search button:hover { background: var(--red-dark); }

/* Drawer — body */
.drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

.drawer-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #222;
  text-decoration: none;
  border-bottom: 1px solid #f4f4f4;
  transition: background .2s, color .2s;
  cursor: pointer;
  user-select: none;
}
.drawer-nav-link .d-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: #f3f4f8;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: all .2s;
  color: #555;
}
.drawer-nav-link:hover,
.drawer-nav-link.active { background: rgba(227,6,19,.06); color: var(--red); }
.drawer-nav-link:hover .d-icon,
.drawer-nav-link.active .d-icon { background: var(--red); color: #fff; }
.drawer-nav-link .d-arrow { font-size: 10px; color: #ccc; margin-left: auto; transition: transform .25s; }
.drawer-nav-link.open .d-arrow { transform: rotate(90deg); color: var(--red); }

/* Drawer — sous-menu */
.drawer-nav-group { border-bottom: 1px solid #f4f4f4; }
.drawer-nav-group .drawer-nav-link { border-bottom: none; }

.drawer-sub {
  display: none;
  background: #fafafa;
}
.drawer-sub.open { display: block; }
.drawer-sub-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px 9px 56px;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  border-bottom: 1px solid #f2f2f2;
  transition: all .2s;
}
.drawer-sub-link:last-child { border-bottom: none; }
.drawer-sub-link:hover { color: var(--red); background: rgba(227,6,19,.05); padding-left: 62px; }
.drawer-sub-icon { font-size: 10px; opacity: .5; flex-shrink: 0; }
.drawer-sub-count {
  font-size: 10px; font-weight: 700;
  background: #eef0f5; color: #888;
  padding: 1px 7px; border-radius: 20px;
  margin-left: auto; flex-shrink: 0;
}

/* Drawer — utilisateur connecté */
.drawer-user-card { pointer-events: none; background: #fafafa; }
.d-icon--user { background: rgba(227,6,19,.08) !important; }
.d-icon--user i { color: var(--red) !important; }
.drawer-avatar-img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }
.drawer-user-info { min-width: 0; }
.drawer-user-name { font-size: 13px; font-weight: 700; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-user-email { font-size: 11px; color: #999; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.drawer-nav-link--danger { color: #e53e3e !important; }
.drawer-nav-link--danger .d-arrow { color: #fca5a5; }
.d-icon--danger { background: rgba(229,62,62,.08) !important; }
.d-icon--danger i { color: #e53e3e !important; }
.drawer-nav-link--danger:hover { background: rgba(229,62,62,.06) !important; color: #c53030 !important; }
.drawer-link-text { flex: 1; min-width: 0; }
.drawer-divider { height: 1px; background: #f0f0f0; margin: 4px 0; }

/* Drawer — pied */
.drawer-footer {
  padding: 14px 16px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.drawer-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13.5px; font-weight: 700;
  text-decoration: none;
  transition: all .25s;
}
.drawer-cta-red {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(227,6,19,.28);
}
.drawer-cta-red:hover { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(227,6,19,.38); color: #fff !important; }
.drawer-cta-outline {
  border: 2px solid #e5e7ef;
  color: #333 !important;
  background: #fff;
}
.drawer-cta-outline:hover { border-color: var(--red); color: var(--red) !important; }
.drawer-wa-icon { color: #25d366 !important; }

/* ================================================================
   TOOLBAR MOBILE — Barre de navigation professionnelle + FAB Devis
   ================================================================ */

.epi-mobile-toolbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 990;
  pointer-events: none;
}

/* Barre blanche plein-largeur */
.epi-mobile-toolbar-inner {
  pointer-events: all;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 62px;
  padding: 0 4px max(10px, env(safe-area-inset-bottom));
  background: #ffffff;
  border-top: 1.5px solid rgba(0,0,0,0.07);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.07), 0 -1px 0 rgba(0,0,0,0.04);
  overflow: visible; /* FAB peut déborder vers le haut */
}

/* Bosse blanche derrière le FAB — crée l'arc */
.mtb-fab-slot {
  flex: 0 0 72px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mtb-fab-slot::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 46px;
  background: #fff;
  border-radius: 50% 50% 0 0;
  border-top: 1.5px solid rgba(0,0,0,0.07);
  border-left: 1.5px solid rgba(0,0,0,0.04);
  border-right: 1.5px solid rgba(0,0,0,0.04);
  z-index: 0;
}

/* ---- Bouton standard ---- */
.mtb-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding-bottom: 10px;
  text-decoration: none;
  color: #9ca3af;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: color 0.2s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  min-width: 0;
  overflow: hidden;
}

.mtb-btn i {
  font-size: 22px;
  line-height: 1;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s;
}

.mtb-btn span:not(.mtb-badge) {
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Trait actif au bas du bouton */
.mtb-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 20px; height: 3px;
  background: var(--red);
  border-radius: 3px 3px 0 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- État actif ---- */
.mtb-btn.active {
  color: var(--red);
}
.mtb-btn.active i { transform: scale(1.08); }
.mtb-btn.active::after { transform: translateX(-50%) scaleX(1); }

/* Hover */
@media (hover: hover) {
  .mtb-btn:not(.mtb-btn-main):hover {
    color: var(--red);
  }
  .mtb-btn:not(.mtb-btn-main):hover i { transform: scale(1.06); }
}

.mtb-btn:active i { transform: scale(0.88) !important; }

/* Badge panier */
.mtb-btn .mtb-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 20px);
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  pointer-events: none;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(227,6,19,0.45);
}

/* ---- FAB Devis — bouton central surélevé ---- */
.mtb-btn-main {
  /* Isolation du positionnement */
  position: relative !important;
  z-index: 1 !important;

  /* Dimensions */
  width: 60px !important;
  height: 60px !important;
  flex: none !important;
  min-width: unset !important;

  /* Remonte de 20px au-dessus de la barre */
  margin-bottom: 6px !important;
  margin-top: -20px !important;

  /* Forme */
  border-radius: 18px !important;
  padding: 6px 4px !important;
  gap: 2px !important;

  /* Couleur */
  background: linear-gradient(150deg, #ff4d5e 0%, var(--red) 45%, #a8000d 100%) !important;
  color: #fff !important;

  /* Ombre portée rouge */
  box-shadow:
    0 8px 24px rgba(227,6,19,0.52),
    0 3px 10px rgba(227,6,19,0.35),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;

  /* Flexbox */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  /* Transitions */
  transition:
    transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.25s ease !important;

  /* Overrides */
  text-decoration: none !important;
  overflow: visible !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Pas de trait actif sur le FAB */
.mtb-btn-main::after,
.mtb-btn-main.active::after { display: none !important; }

/* Shimmer animé */
.mtb-btn-main::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: fabShimmer 3s ease infinite;
  pointer-events: none;
}

@keyframes fabShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.mtb-btn-main i {
  font-size: 22px !important;
  color: #fff !important;
  line-height: 1 !important;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
}

.mtb-btn-main span {
  font-size: 9px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.90) !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (hover: hover) {
  .mtb-btn-main:hover {
    transform: scale(1.07) translateY(-3px) !important;
    box-shadow:
      0 14px 32px rgba(227,6,19,0.60),
      0 4px 14px rgba(227,6,19,0.38),
      inset 0 1px 0 rgba(255,255,255,0.30) !important;
    color: #fff !important;
  }
}

.mtb-btn-main:active {
  transform: scale(0.92) translateY(0) !important;
  box-shadow:
    0 4px 14px rgba(227,6,19,0.40),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

@media (max-width: 768px) {
  .epi-mobile-toolbar { display: block; }
  body { padding-bottom: 74px !important; }
}

/* ================================================================
   SECTIONS — Transparentes (fond visible autour)
   ================================================================ */
section { background: transparent !important; position: relative; z-index: 1; }

/* Exceptions — sections sombres gardent leur fond */
.home-hero,
.home-stats,
.home-viewed,
.home-banner-split,
.home-collections,
.tf-slideshow,
.order-success-hero,
.cat-hero,
#footer { background: revert !important; }

/* Hero pages internes — fond sombre avec dégradé rouge */
.tf-page-title.style-2 {
  background: linear-gradient(135deg, var(--epi-dark) 0%, #1c0305 50%, var(--epi-dark-3) 100%) !important;
  position: relative;
  z-index: 2 !important;
  overflow: hidden;
}
.tf-page-title.style-2::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(227,6,19,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.tf-page-title.style-2 h1,
.tf-page-title.style-2 h2,
.tf-page-title.style-2 h4,
.tf-page-title.style-2 p,
.tf-page-title.style-2 .lead { color: #fff !important; }
.tf-page-title.style-2 .breadcrumb-item a { color: rgba(255,255,255,0.65) !important; }
.tf-page-title.style-2 .breadcrumb-item a:hover { color: #ff8089 !important; }
.tf-page-title.style-2 .breadcrumb-item.active { color: rgba(255,255,255,0.4) !important; }
.tf-page-title.style-2 .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.3) !important; }
.tf-page-title.style-2 .epi-divider { background: linear-gradient(90deg, transparent, rgba(227,6,19,0.6), transparent) !important; }

/* Sections bg-light en verre léger */
section.bg-light { background: rgba(240,242,250,0.65) !important; }
.flat-spacing-10 { background: transparent !important; }

/* Sections sombres des pages internes (formations, contact CTA, etc.) */
section[style*="background: linear-gradient(135deg, var(--epi-dark)"] {
  z-index: 2 !important;
}

/* ================================================================
   CONTENEURS FLOTTANTS (glass sur le fond)
   Les sections sont transparentes, les .container flottent
   ================================================================ */

/* Sections claires de la home = container glass */
.home-categories > .container,
.home-offers > .container {
  background: rgb(255, 255, 255) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 22px !important;
  padding: 28px 24px !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.07), 0 1px 0 rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
}

/* Pages intérieures — container glass */
section.py-5:not(.home-hero):not(.home-stats):not(.home-viewed):not(.home-banner-split) > .container,
section.flat-spacing-1 > .container,
section.flat-spacing-5 > .container,
section.flat-spacing-11 > .container {
  background: rgba(255,255,255,0.90) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 28px rgba(0,0,0,0.07) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

/* EXCEPTION : containers des sections sombres */
.home-stats > .container,
.home-viewed > .container,
.home-banner-split > .container,
.home-hero > *,
.tf-slideshow > *,
.tf-page-title.style-2 > *,
section[style*="background: linear-gradient"] > .container,
.cat-hero > * {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* ================================================================
   CARDS — Glass renforcé
   ================================================================ */
.card {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 36px rgba(227,6,19,0.12) !important;
}
.card:hover .card-img-top { transform: scale(1.05); }
.card-img-top { transition: transform 0.4s ease; }

/* ================================================================
   BOUTONS
   ================================================================ */
.btn-danger,
.tf-btn.btn-fill {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 14px rgba(227,6,19,0.22) !important;
  transition: all 0.25s ease !important;
}
.btn-danger:hover, .tf-btn.btn-fill:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 22px rgba(227,6,19,0.35) !important;
  color: #fff !important;
}
.btn-outline-danger {
  border: 2px solid var(--red) !important;
  color: var(--red) !important;
  background: transparent !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}
.btn-outline-danger:hover {
  background: var(--red) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}
.btn-primary {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%) !important;
  border: none !important; color: #fff !important;
  border-radius: 50px !important; font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(227,6,19,0.22) !important;
}
.btn-primary:hover { transform: translateY(-2px) !important; color: #fff !important; }
.tf-btn.btn-line {
  border: 2px solid var(--red) !important;
  color: var(--red) !important;
  background: transparent !important;
  border-radius: 50px !important;
}
.tf-btn.btn-line:hover { background: var(--red) !important; color: #fff !important; }

/* ================================================================
   FORMULAIRES
   ================================================================ */
.form-control, .form-select, .tf-field-input {
  border: 2px solid #e5e7ef !important;
  border-radius: 12px !important;
  padding: 11px 15px !important;
  font-size: 14px !important;
  background: #fff !important;
  color: #333 !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.form-control:focus, .form-select:focus, .tf-field-input:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 4px rgba(227,6,19,0.07) !important;
  outline: none !important;
}
.form-check-input:checked {
  background-color: var(--red) !important;
  border-color: var(--red) !important;
}
.input-group-text {
  background: #f4f5f8 !important;
  border: 2px solid #e5e7ef !important;
  border-right: none !important;
  border-radius: 12px 0 0 12px !important;
  color: var(--red) !important;
}
.input-group .form-control {
  border-left: none !important;
  border-radius: 0 12px 12px 0 !important;
}
.input-group:focus-within .input-group-text {
  border-color: var(--red) !important;
}

/* ================================================================
   TEXTES — ASSURER LISIBILITÉ
   ================================================================ */

/* Textes blancs sur sections sombres */
.home-hero .text-white,
.home-hero .text_white,
.home-stats .text-white,
.home-stats .text_white,
.home-viewed .text-white,
.home-banner-split .text-white,
.tf-page-title.style-2 .text-white,
.tf-slideshow .text-white,
.tf-slideshow .text_white,
.epi-topbar .tb-item,
.epi-topbar .tb-link { color: #fff !important; }

/* Titres sur les sections sombres */
.tf-slideshow .box-content h1,
.tf-slideshow .box-content .heading,
.home-hero .box-content h1 { color: #fff !important; text-shadow: 0 2px 16px rgba(0,0,0,0.35) !important; }
.tf-slideshow .box-content p,
.home-hero .box-content p { color: rgba(255,255,255,0.9) !important; }

/* Titres sur fond clair */
h1, h2, h3, h4, h5, h6 { color: #1a1a2e; }
.display-4, .display-5 { color: #1a1a2e !important; letter-spacing: -0.5px !important; }

/* Texte danger = rouge */
.text-danger, .current-price { color: var(--red) !important; }

/* ================================================================
   ALERTES
   ================================================================ */
.alert { border: none !important; border-radius: 12px !important; }
.alert-success { background: rgba(46,204,113,0.1) !important; border-left: 4px solid #2ecc71 !important; color: #1e8a4a !important; }
.alert-danger   { background: rgba(227,6,19,0.07) !important; border-left: 4px solid var(--red) !important; color: var(--red-dark) !important; }
.alert-info     { background: rgba(52,152,219,0.1) !important; border-left: 4px solid #3498db !important; color: #1a6fa8 !important; }

/* ================================================================
   MODAUX
   ================================================================ */
.modal-content {
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.2) !important;
  overflow: hidden !important;
  background: #fff !important;
}
.modal-header {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark2) 100%) !important;
  border: none !important; padding: 18px 22px !important;
}
.modal-header .modal-title,
.modal-header h5,
.modal-header .demo-title { color: #fff !important; font-weight: 700 !important; }
.modal-header .btn-close { filter: brightness(10) !important; }
.form-sign-in .modal-content .header {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark2) 100%) !important;
  padding: 18px 22px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.form-sign-in .demo-title { color: #fff !important; font-weight: 700 !important; font-size: 17px !important; }
.form-sign-in .icon-close-popup { color: rgba(255,255,255,0.65) !important; }
.form-sign-in .tf-login-form { padding: 22px !important; }

/* ================================================================
   FOOTER
   ================================================================ */
#footer.footer {
  background: linear-gradient(160deg, #14142a 0%, #1a1a3a 50%, #0e2a50 100%) !important;
  position: relative !important; z-index: 2 !important;
  border-top: 3px solid var(--red) !important;
}
#footer .footer-heading h6 { color: #fff !important; font-weight: 700 !important; }
#footer .footer-menu_item { color: rgba(255,255,255,0.55) !important; }
#footer .footer-menu_item:hover { color: rgba(255,255,255,0.88) !important; padding-left: 4px !important; }
#footer .footer-infor ul li p,
#footer .footer-infor ul li a { color: rgba(255,255,255,0.55) !important; font-size: 13px !important; }
#footer .footer-infor ul li a:hover { color: #fff !important; }
#footer .footer-body { padding: 56px 0 36px !important; }
#footer .footer-bottom { background: rgba(0,0,0,0.2) !important; padding: 18px 0 !important; }
#footer .footer-bottom .footer-menu_item { color: rgba(255,255,255,0.35) !important; font-size: 12px !important; }
/* Newsletter footer */
#footer .form-newsletter .email input {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #fff !important; border-radius: 50px !important;
  padding: 11px 18px !important; width: 100% !important;
  outline: none !important; font-size: 13px !important;
  margin-bottom: 10px !important;
  transition: border-color 0.25s !important;
}
#footer .form-newsletter .email input:focus { border-color: var(--red) !important; }
#footer .form-newsletter .email input::placeholder { color: rgba(255,255,255,0.35) !important; }
#footer .form-newsletter #subscribe-button {
  background: linear-gradient(135deg, var(--red), var(--red-dark)) !important;
  border: none !important; color: #fff !important; width: 100% !important;
  justify-content: center !important;
}
/* Icônes sociales */
#footer .social-facebook  { background: rgba(59,89,152,0.18) !important; color: #7b9fd0 !important; }
#footer .social-twiter    { background: rgba(29,161,242,0.18) !important; color: #7ec3f5 !important; }
#footer .social-instagram { background: rgba(228,64,95,0.18) !important;  color: #f08090 !important; }
#footer .social-tiktok    { background: rgba(255,255,255,0.1) !important;  color: rgba(255,255,255,0.5) !important; }
#footer .tf-btn.btn-line { border-color: rgba(255,255,255,0.2) !important; color: rgba(255,255,255,0.55) !important; }
#footer .tf-btn.btn-line:hover { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }

/* ================================================================
   PAGE TITLE & BREADCRUMB
   ================================================================ */
.tf-page-title:not(.style-2) {
  background: rgba(243,245,252,0.95) !important;
  border-bottom: 3px solid var(--red) !important;
  position: relative !important; z-index: 2 !important;
  backdrop-filter: blur(10px) !important;
}
.tf-page-title.style-2 .heading,
.tf-page-title.style-2 h1,
.tf-page-title.style-2 h4 { color: #fff !important; }
.tf-page-title.style-2 .breadcrumb-item a { color: rgba(255,255,255,0.7) !important; }
.tf-page-title.style-2 .breadcrumb-item.active { color: rgba(255,255,255,0.5) !important; }
.breadcrumb-item a { color: var(--red) !important; font-weight: 500 !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--red) !important; }

/* ================================================================
   SIDEBAR COMPTE CLIENT
   ================================================================ */
.wrap-sidebar-account {
  background: rgba(255,255,255,0.95) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  position: sticky !important; top: 90px !important;
}
.my-account-nav .my-account-nav-item {
  border-radius: 10px !important; padding: 11px 14px !important;
  font-size: 14px !important; font-weight: 500 !important;
  transition: all 0.2s ease !important; display: block !important;
  text-decoration: none !important; color: #333 !important;
}
.my-account-nav .my-account-nav-item:hover,
.my-account-nav .my-account-nav-item.active {
  background: rgba(227,6,19,0.07) !important;
  color: var(--red) !important;
}
.my-account-nav .my-account-nav-item.active {
  background: linear-gradient(135deg, var(--red), var(--red-dark)) !important;
  color: #fff !important;
}
.my-account-content {
  background: rgba(255,255,255,0.95) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07) !important;
  padding: 24px !important;
}
.title-account {
  font-size: 18px !important; font-weight: 800 !important;
  color: #1a1a2e !important; margin-bottom: 18px !important;
  padding-bottom: 14px !important; border-bottom: 2px solid #f0f0f0 !important;
  position: relative !important;
}
.title-account::after {
  content: '' !important; position: absolute !important;
  bottom: -2px !important; left: 0 !important;
  width: 40px !important; height: 2px !important;
  background: var(--red) !important;
}

/* ================================================================
   TABLES
   ================================================================ */
.table thead th {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark2) 100%) !important;
  color: #fff !important; font-weight: 600 !important; font-size: 13px !important;
  border: none !important; padding: 12px 14px !important;
}
.table tbody tr:hover { background: rgba(227,6,19,0.04) !important; }
.table tbody td { padding: 12px 14px !important; font-size: 14px !important; vertical-align: middle !important; border-color: #f0f0f0 !important; }

/* ================================================================
   PAGINATION
   ================================================================ */
.pagination .page-link {
  border-radius: 8px !important; border: 2px solid #e5e7ef !important;
  color: #333 !important; font-weight: 500 !important; transition: all 0.2s ease !important;
}
.pagination .page-link:hover { background: rgba(227,6,19,0.07) !important; border-color: var(--red) !important; color: var(--red) !important; }
.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--red), var(--red-dark)) !important;
  border-color: var(--red) !important; color: #fff !important;
}

/* ================================================================
   BADGES & STATUS
   ================================================================ */
.badge.bg-danger, .badge-danger {
  background: linear-gradient(135deg, var(--red), var(--red-dark)) !important;
}
.badge.bg-success { background: linear-gradient(135deg, #2ecc71, #27ae60) !important; }
.badge.bg-warning { background: linear-gradient(135deg, #f57c00, #e65100) !important; color: #fff !important; }
.badge.bg-info    { background: linear-gradient(135deg, #3498db, #2980b9) !important; color: #fff !important; }

/* ================================================================
   GoTop, WhatsApp
   ================================================================ */
#goTop {
  background: linear-gradient(135deg, var(--red), var(--red-dark)) !important;
  border: none !important; color: #fff !important;
  border-radius: 50% !important; width: 46px !important; height: 46px !important;
  box-shadow: 0 4px 16px rgba(227,6,19,0.3) !important;
  transition: all 0.3s ease !important;
}
#goTop:hover { transform: translateY(-3px) !important; }
#toggle-rtl { display: none !important; }

/* WhatsApp flottant */
.whatsapp-float {
  position: fixed;
  bottom: 85px; right: 22px;
  width: 52px; height: 52px;
  background: #25d366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(37,211,102,0.45);
  text-decoration: none;
  z-index: 980;
  transition: all 0.3s ease;
}
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37,211,102,0.55); }
.whatsapp-float::before {
  content: '';
  position: absolute; width: 100%; height: 100%;
  border-radius: 50%; background: #25d366;
  animation: wp-pulse 2.2s infinite; z-index: -1;
}
@keyframes wp-pulse { 0%{transform:scale(1);opacity:1} 60%{transform:scale(1.3);opacity:0} 100%{transform:scale(1.3);opacity:0} }
@media(max-width:768px) { .whatsapp-float { bottom: 82px; right: 14px; width: 46px; height: 46px; } }

/* Ripple sur boutons */
@keyframes rpl { to { transform: scale(4); opacity: 0; } }

/* ================================================================
   OFFCANVAS (filtres, recherche)
   ================================================================ */
.offcanvas-header {
  background: linear-gradient(135deg, var(--dark), var(--dark2)) !important;
}
.offcanvas-title { color: #fff !important; font-weight: 700 !important; }
.offcanvas-header .btn-close { filter: brightness(10) !important; }

/* ================================================================
   RESPONSIVE HEADER — breakpoints précis
   ================================================================ */

/* Tablette large : barre de recherche un peu plus petite */
@media (max-width: 1300px) {
  .epi-header__search {
    flex: 0 0 240px !important;
    width: 240px !important;
    max-width: 240px !important;
  }
}

/* Sous le breakpoint desktop du thème (< 1150px) :
   tf-md-hidden est caché → la recherche disparaît du header.
   On recalcule le row sans elle. */
@media (max-width: 1149px) {
  .epi-header__row { gap: 8px; min-height: 60px; padding: 6px 0; }
  .epi-btn-devis span { display: none; }           /* icône seule */
  .epi-btn-devis { padding: 9px 12px !important; border-radius: 50% !important; }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .epi-header__row { min-height: 56px; padding: 5px 0; }
  #header .logo-header .logo,
  .epi-header__logo .logo { max-height: 42px !important; }
  /* Cache le bouton devis du header (il est dans la toolbar mobile) */
  .epi-btn-devis { display: none !important; }
  .nav-icon-label { display: none !important; }
}

/* ================================================================
   RESPONSIVE GLOBAL
   ================================================================ */
@media(max-width:991px) {
  .home-categories > .container,
  .home-products-section > .container,
  .home-offers > .container,
  .home-articles > .container { padding: 22px 18px !important; }

  section.py-5 > .container { padding: 22px 18px !important; }
}

@media(max-width:768px) {
  /* Typo responsive */
  h1 { font-size: clamp(26px, 7vw, 40px) !important; }
  h2 { font-size: clamp(20px, 5vw, 30px) !important; }
  .display-4 { font-size: clamp(24px, 7vw, 38px) !important; }
  .display-5 { font-size: clamp(20px, 5vw, 28px) !important; }

  /* Containers glass réduits */
  .home-categories > .container,
  .home-products-section > .container,
  .home-offers > .container,
  .home-articles > .container,
  section.py-5 > .container,
  section.flat-spacing-1 > .container,
  section.flat-spacing-11 > .container {
    border-radius: 14px !important;
    padding: 16px 14px !important;
  }

  /* Footer grid */
  #footer .row { flex-direction: column !important; }
  #footer .col-xl-3, #footer .col-md-6 { width: 100% !important; margin-bottom: 28px; }
  #footer .col-xl-3:last-child { margin-bottom: 0; }

  /* Account sidebar */
  .wrap-sidebar-account { position: static !important; margin-bottom: 16px !important; }
}

@media(max-width:576px) {
  /* Forms */
  .row.g-3 > .col-md-6 { width: 100% !important; }
}

/* ================================================================
   COLLECTION HOME
   ================================================================ */
.collection-item-circle .collection-image {
  border-radius: 50% !important; overflow: hidden !important;
  border: 3px solid #e5e7ef !important; transition: all 0.3s ease !important;
  display: block !important; width: 86px !important; height: 86px !important; margin: 0 auto !important;
}
.collection-item-circle:hover .collection-image {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 5px rgba(227,6,19,0.1) !important;
  transform: translateY(-3px) !important;
}
.collection-item-circle .title { color: #1a1a2e !important; transition: color 0.2s ease !important; }
.collection-item-circle:hover .title { color: var(--red) !important; }

/* ================================================================
   SEARCH RESULTS OFFCANVAS
   ================================================================ */
.canvas-search { border-left: 3px solid var(--red) !important; }
.tf-search-head { background: linear-gradient(135deg, var(--dark), var(--dark2)) !important; }
.tf-search-head .title { color: #fff !important; font-weight: 700 !important; }
.tf-search-head .icon-close-popup { color: rgba(255,255,255,0.6) !important; }
.search-result-item:hover { background: rgba(227,6,19,0.06) !important; }
.search-result-item .price { color: var(--red) !important; }

/* ================================================================
   ACCESSIBILITÉ
   ================================================================ */
@media(prefers-reduced-motion: reduce) {
  .epi-blob, #epi-particles-canvas { animation: none !important; }
  #epi-particles-canvas { display: none !important; }
  * { transition-duration: 0.01ms !important; }
}