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

/* === SMOOTH SCROLL === */
html { scroll-behavior: smooth; }


/* ============================================================
   UTILITAIRES DISPLAY
   ============================================================ */
.hidden        { display: none !important; }
.block         { display: block; }
.inline-block  { display: inline-block; }
.inline-flex   { display: inline-flex; }
.flex          { display: flex; }
.fl-grid        { display: grid; }

/* ============================================================
   FLEXBOX
   ============================================================ */
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }

.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }

.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start   { justify-content: flex-start; }

/* ============================================================
   GRID
   ============================================================ */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ============================================================
   GAP
   ============================================================ */
.gap-0\.5 { gap: 0.125rem; }
.gap-1    { gap: 0.25rem; }
.gap-2    { gap: 0.5rem; }
.gap-3    { gap: 0.75rem; }
.gap-4    { gap: 1rem; }
.gap-5    { gap: 1.25rem; }
.gap-6    { gap: 1.5rem; }
.gap-7    { gap: 1.75rem; }
.gap-8    { gap: 2rem; }
.gap-10   { gap: 2.5rem; }
.gap-12   { gap: 3rem; }

/* ============================================================
   SPACE-Y (enfants espacés)
   ============================================================ */
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* ============================================================
   CONTAINER
   ============================================================ */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px)  { .container { max-width: 640px;  } }
@media (min-width: 768px)  { .container { max-width: 768px;  } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }

/* ============================================================
   MARGIN
   ============================================================ */
.mx-auto  { margin-left: auto; margin-right: auto; }
.-mt-1    { margin-top: -0.25rem; }
.mt-1     { margin-top: 0.25rem; }
.mt-3     { margin-top: 0.75rem; }
.mt-4     { margin-top: 1rem; }
.mt-6     { margin-top: 1.5rem; }
.mt-8     { margin-top: 2rem; }
.ml-1     { margin-left: 0.25rem; }
.mb-1     { margin-bottom: 0.25rem; }
.mb-2     { margin-bottom: 0.5rem; }
.mb-3     { margin-bottom: 0.75rem; }
.mb-4     { margin-bottom: 1rem; }
.mb-5     { margin-bottom: 1.25rem; }
.mb-6     { margin-bottom: 1.5rem; }
.mb-8     { margin-bottom: 2rem; }
.mb-10    { margin-bottom: 2.5rem; }
.mb-12    { margin-bottom: 3rem; }
.mb-14    { margin-bottom: 3.5rem; }
.mb-16    { margin-bottom: 4rem; }

/* ============================================================
   PADDING
   ============================================================ */
.p-4     { padding: 1rem; }
.p-6     { padding: 1.5rem; }
.p-7     { padding: 1.75rem; }
.px-3    { padding-left: 0.75rem;  padding-right: 0.75rem; }
.px-4    { padding-left: 1rem;     padding-right: 1rem; }
.px-5    { padding-left: 1.25rem;  padding-right: 1.25rem; }
.px-6    { padding-left: 1.5rem;   padding-right: 1.5rem; }
.px-8    { padding-left: 2rem;     padding-right: 2rem; }
.px-10   { padding-left: 2.5rem;   padding-right: 2.5rem; }
.py-1    { padding-top: 0.25rem;   padding-bottom: 0.25rem; }
.py-2    { padding-top: 0.5rem;    padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem;  padding-bottom: 0.625rem; }
.py-3    { padding-top: 0.75rem;   padding-bottom: 0.75rem; }
.py-4    { padding-top: 1rem;      padding-bottom: 1rem; }
.py-7    { padding-top: 1.75rem;   padding-bottom: 1.75rem; }
.py-8    { padding-top: 2rem;      padding-bottom: 2rem; }
.py-20   { padding-top: 5rem;      padding-bottom: 5rem; }
.py-24   { padding-top: 6rem;      padding-bottom: 6rem; }
.py-28   { padding-top: 7rem;      padding-bottom: 7rem; }
.py-32   { padding-top: 8rem;      padding-bottom: 8rem; }
.pt-8    { padding-top: 2rem; }
.pt-16   { padding-top: 4rem; }
.pb-8    { padding-bottom: 2rem; }

/* ============================================================
   LARGEUR / HAUTEUR
   ============================================================ */
.w-5    { width: 1.25rem; }
.w-6    { width: 1.5rem; }
.w-9    { width: 2.25rem; }
.w-10   { width: 2.5rem; }
.w-14   { width: 3.5rem; }
.w-16   { width: 4rem; }
.w-20   { width: 5rem; }
.w-52   { width: 13rem; }
.w-56   { width: 14rem; }
.w-full { width: 100%; }

.h-5    { height: 1.25rem; }
.h-6    { height: 1.5rem; }
.h-9    { height: 2.25rem; }
.h-10   { height: 2.5rem; }
.h-12   { height: 3rem; }
.h-14   { height: 3.5rem; }
.h-16   { height: 4rem; }
.h-20   { height: 5rem; }
.h-full { height: 100%; }

.max-w-lg  { max-width: 32rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }

/* ============================================================
   POSITION
   ============================================================ */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }

.inset-0   { top: 0; right: 0; bottom: 0; left: 0; }
.-inset-1  { top: -0.25rem; right: -0.25rem; bottom: -0.25rem; left: -0.25rem; }
.top-3     { top: 0.75rem; }
.top-10    { top: 2.5rem; }
.right-0   { right: 0; }
.right-3   { right: 0.75rem; }
.right-5   { right: 1.25rem; }
.left-0    { left: 0; }
.left-3    { left: 0.75rem; }
.left-5    { left: 1.25rem; }
.bottom-4  { bottom: 1rem; }
.bottom-20 { bottom: 5rem; }
.left-1\/2 { left: 50%; }

.z-0  { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }

/* ============================================================
   TRANSFORM
   ============================================================ */
.-translate-x-1\/2 { transform: translateX(-50%); }
.-translate-y-1\/2 { transform: translateY(-50%); }
.translate-y-0     { transform: translateY(0); }

/* ============================================================
   OVERFLOW / OBJECT
   ============================================================ */
.overflow-hidden { overflow: hidden; }
.object-cover    { object-fit: cover; }
.aspect-square   { aspect-ratio: 1 / 1; }

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 1.1rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;     line-height: 1; }
.text-6xl  { font-size: 3.75rem;  line-height: 1; }
.text-7xl  { font-size: 4.5rem;   line-height: 1; }

.font-bold     { font-weight: 800; }
.font-semibold { font-weight: 600; }
.font-medium   { font-weight: 500; }

.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.leading-6       { line-height: 1.5rem; }

.tracking-wide   { letter-spacing: 0.025em; }
.tracking-wider  { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

.uppercase   { text-transform: uppercase; }
.italic      { font-style: italic; }
.text-center { text-align: center; }
.whitespace-nowrap { white-space: nowrap; }
.outline-none { outline: none; }

/* ============================================================
   COULEURS DE TEXTE
   ============================================================ */
.text-white     { color: #ffffff; }
.text-white\/50 { color: rgba(255,255,255,0.50); }
.text-white\/70 { color: rgba(255,255,255,0.70); }
.text-white\/75 { color: rgba(255,255,255,0.75); }
.text-white\/80 { color: rgba(255,255,255,0.80); }
.text-white\/90 { color: rgba(255,255,255,0.90); }
.text-gray-400  { color: #9ca3af; }
.text-gray-500  { color: #6b7280; }
.text-gray-600  { color: #4b5563; }
.text-gray-700  { color: #374151; }
.text-gray-800  { color: #1f2937; }
.text-gray-900  { color: #111827; }
.text-yellow-400 { color: #facc15; }
.text-amber-500  { color: #f59e0b; }

/* ============================================================
   COULEURS DE FOND
   ============================================================ */
.bg-white     { background-color: #ffffff; }
.bg-gray-50   { background-color: #f9fafb; }
.bg-gray-900  { background-color: #111827; }
.bg-red-500   { background-color: #ef4444; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-blue-500  { background-color: #3b82f6; }
.bg-white\/10 { background-color: rgba(255,255,255,0.10); }
.bg-white\/15 { background-color: rgba(255,255,255,0.15); }
.bg-white\/20 { background-color: rgba(255,255,255,0.20); }
.bg-white\/25 { background-color: rgba(255,255,255,0.25); }
.bg-white\/90 { background-color: rgba(255,255,255,0.90); }

/* ============================================================
   BORDURES
   ============================================================ */
.border   { border-width: 1px; border-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }

.border-gray-100  { border-color: #f3f4f6; }
.border-gray-200  { border-color: #e5e7eb; }
.border-white\/10 { border-color: rgba(255,255,255,0.10); }
.border-white\/20 { border-color: rgba(255,255,255,0.20); }
.border-white\/30 { border-color: rgba(255,255,255,0.30); }
.border-white\/50 { border-color: rgba(255,255,255,0.50); }

.rounded-full { border-radius: 9999px; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-3xl  { border-radius: 1.5rem; }

/* ============================================================
   OMBRES
   ============================================================ */
.shadow-sm  { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }

/* ============================================================
   OPACITÉ / TRANSITIONS
   ============================================================ */
.opacity-0   { opacity: 0; }
.opacity-100 { opacity: 1; }

.transition-all    { transition: all 150ms cubic-bezier(0.4,0,0.2,1); }
.transition-colors { transition: color, background-color, border-color 150ms cubic-bezier(0.4,0,0.2,1); }

/* ============================================================
   BACKDROP FILTER
   ============================================================ */
.backdrop-blur-sm {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ============================================================
   HOVER
   ============================================================ */
.hover\:bg-white:hover      { background-color: #ffffff; }
.hover\:bg-white\/25:hover  { background-color: rgba(255,255,255,0.25); }
.hover\:text-white:hover    { color: #ffffff; }
.hover\:text-white\/90:hover { color: rgba(255,255,255,0.90); }
.hover\:opacity-100:hover   { opacity: 1; }

/* ============================================================
   GROUP HOVER (bouton ♥ sur les cartes produit)
   ============================================================ */
.group:hover .group-hover\:opacity-100 { opacity: 1; }

/* ============================================================
   RESPONSIVE — sm (≥ 640px)
   ============================================================ */
@media (min-width: 640px) {
  .sm\:block        { display: block; }
  .sm\:flex-row     { flex-direction: row; }
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   RESPONSIVE — md (≥ 768px)
   ============================================================ */
@media (min-width: 768px) {
  .md\:block           { display: block; }
  .md\:hidden          { display: none; }
  .md\:flex            { display: flex; }
  .md\:flex-row        { flex-direction: row; }
  .md\:items-end       { align-items: flex-end; }
  .md\:justify-between { justify-content: space-between; }
  .md\:justify-start   { justify-content: flex-start; }

  .md\:text-5xl { font-size: 3.7rem;    line-height: 1; }
  .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
  .md\:text-xl  { font-size: 1.25rem; line-height: 1.75rem; }

  .md\:py-24 { padding-top: 6rem;  padding-bottom: 6rem; }
  .md\:py-28 { padding-top: 7rem;  padding-bottom: 7rem; }
  .md\:py-32 { padding-top: 8rem;  padding-bottom: 8rem; }
  .md\:gap-8 { gap: 2rem; }
  .md\:mt-0  { margin-top: 0; }

  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   RESPONSIVE — lg (≥ 1024px)
   ============================================================ */
@media (min-width: 1024px) {
  .lg\:block   { display: block; }
  .lg\:hidden  { display: none; }
  .lg\:flex    { display: flex; }

  .lg\:text-7xl { font-size: 4.5rem; line-height: 1; }

  .lg\:gap-7   { gap: 1.75rem; }
  .lg\:gap-8   { gap: 2rem; }
  .lg\:gap-12  { gap: 3rem; }
  .lg\:px-8    { padding-left: 2rem; padding-right: 2rem; }

  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   COMPOSANTS PERSONNALISÉS — PROMO BANNER
   ============================================================ */
.promo-banner {
  background: linear-gradient(90deg, #26314f, #394873, #26314f);
  background-size: 200% 100%;
  animation: fl-shimmer 3s ease infinite;
}
@keyframes fl-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   COMPOSANTS PERSONNALISÉS — HERO SLIDER
   ============================================================ */
.hero-slider {
  position: relative;
  height: 70vh;
  min-height: 500px;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  transition: transform 6s linear;
}
.hero-slide.active img { transform: scale(1); }
.hero-slide .slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.3) 100%);
}
.hero-slide .slide-content {
  position: absolute; inset: 0;
  display: flex; align-items: center;
}
.hero-slide .slide-text  { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s; }
.hero-slide .slide-badge { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s; }
.hero-slide .slide-cta   { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0.7s, transform 0.6s ease 0.7s; }
.hero-slide.active .slide-text  { opacity: 1; transform: translateY(0); }
.hero-slide.active .slide-badge { opacity: 1; transform: translateY(0); }
.hero-slide.active .slide-cta   { opacity: 1; transform: translateY(0); }

/* Alignement exact des boutons CTA — reset des marges thème/Elementor */
.slide-cta a,
.elementor-widget-html .slide-cta a,
#fl-heroSlider .slide-cta a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: top !important;
  margin: 0 !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 10 !important;
  text-decoration: none !important;
}

.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; cursor: pointer; transition: all 0.3s ease;
}
.slider-arrow:hover { background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.08); }
.slider-arrow.prev  { left: 24px; }
.slider-arrow.next  { right: 24px; }
@media (max-width: 768px) {
  .slider-arrow { width: 40px; height: 40px; font-size: 14px; }
  .slider-arrow.prev { left: 12px; }
  .slider-arrow.next { right: 12px; }
}
.slider-dots {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; gap: 10px; align-items: center;
}
.slider-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.35); border: 2px solid rgba(255,255,255,0.5);
  cursor: pointer; transition: all 0.3s ease; position: relative; padding: 0;
}
.slider-dot.active { background: #fff; border-color: #fff; transform: scale(1.15); }
.slider-dot .dot-progress {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: #8a96b3; opacity: 0;
}
.slider-dot.active .dot-progress { opacity: 1; animation: fl-dot-spin 6s linear infinite; }
@keyframes fl-dot-spin { to { transform: rotate(360deg); } }

@keyframes fl-bounce-down {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}
.bounce-down { animation: fl-bounce-down 2s infinite; }

/* ============================================================
   COMPOSANTS PERSONNALISÉS — CARTES CATÉGORIE
   ============================================================ */
.cat-card { transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.cat-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.cat-card:hover .cat-img { transform: scale(1.08); }
.cat-card .cat-img { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* ============================================================
   COMPOSANTS PERSONNALISÉS — CARTES PRODUIT
   ============================================================ */
.product-card { transition: all 0.3s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.1); }
.product-card:hover .product-img { transform: scale(1.05); }
.product-img { transition: transform 0.5s ease; }

/* ============================================================
   COMPOSANTS PERSONNALISÉS — BADGES / AVIS
   ============================================================ */
.trust-badge         { transition: all 0.3s ease; }
.trust-badge:hover   { transform: translateY(-4px); }
.review-card         { transition: all 0.3s ease; }
.review-card:hover   { transform: scale(1.02); }

/* ============================================================
   COMPOSANTS PERSONNALISÉS — CTA PULSE
   ============================================================ */
.cta-pulse { animation: fl-pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; }
@keyframes fl-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(57,72,115,0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(57,72,115,0); }
  100% { box-shadow: 0 0 0 0 rgba(57,72,115,0); }
}

/* ============================================================
   COMPOSANTS PERSONNALISÉS — FADE SECTIONS
   ============================================================ */
.fade-section         { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.fade-section.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   NEWSLETTER INPUT FOCUS
   ============================================================ */
.fl-newsletter-input:focus {
  border-color: #394873;
  box-shadow: 0 0 0 3px rgba(57,72,115,0.1);
}

/* ============================================================
   CARTE PRODUIT — grid1.tpl
   ============================================================ */

/* Conteneur <li> — doit être flex pour que la carte puisse s'étirer */
ul.products > li,
.products > li {
  display: flex;
  flex-direction: column;
}

/* Carte principale */
.fl-product-card {
  background: #fff;
  border-radius: 1rem;          /* rounded-2xl */
  border: 1px solid #f3f4f6;    /* border-gray-100 */
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  list-style: none;
  flex: 1;                      /* remplit la hauteur du <li> */
  
}
@media (hover: hover) {
  .fl-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.10);
  }
}

/* Bloc image */
.fl-product-img-wrap {
  position: relative;
  background: #f9fafb;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.fl-product-img-link {
  display: block;
  width: 100%;
  height: 100%;
}
.fl-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}
@media (hover: hover) {
  .fl-product-card:hover .fl-product-img {
    transform: scale(1.05);
  }
}

/* Badges (Nouveau, Promo…) */
.fl-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 2;
}
.fl-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  color: #fff;
  line-height: 1.4;
}
.fl-badge--new,
.fl-badge--new_product  { background: #3b82f6; }   /* bleu */
.fl-badge--on-sale,
.fl-badge--discount,
.fl-badge--price-drop   { background: #ef4444; }   /* rouge */
.fl-badge--pack         { background: #f59e0b; }   /* amber */
.fl-badge--out-of-stock { background: #9ca3af; }   /* gris */

/* Bouton wishlist (hook) */
.fl-wishlist-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.25s ease;
}
@media (hover: hover) {
  .fl-product-card:hover .fl-wishlist-btn { opacity: 1; }
}
@media (hover: none) {
  .fl-wishlist-btn { opacity: 1; }
}

/* Restyle du bouton wishlist généré par le module */
.fl-wishlist-btn a,
.fl-wishlist-btn button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  color: #4b5563;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
}
.fl-wishlist-btn a:hover,
.fl-wishlist-btn button:hover { background: #fff; color: #ef4444; }

/* Corps de la carte */
.fl-product-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Catégorie */
.fl-product-cat {
  font-size: 0.9rem;
  font-weight: 500;
  color: #394873;
  margin: 0 0 0.25rem;
  text-transform: capitalize;
  letter-spacing: 0.04em;
}

/* Nom du produit */
.fl-product-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.5rem;
  line-height: 1.35;
  font-family: "Inter", sans-serif;
}
.fl-product-name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.fl-product-name a:hover { color: #394873; }

/* Avis (hook module) */
.fl-product-reviews {
  margin-bottom: 0.6rem;
  min-height: 1rem;
}

/* Prix */
.fl-product-price {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.fl-price-old {
  font-size: 0.7rem;
  color: #9ca3af;
  text-decoration: line-through;
}
.fl-price-current {
  font-size: 1.4rem;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}
.fl-price-current.fl-price-sale { color: #ef4444; }

/* Ligne quantité + bouton panier */
.fl-qty-cart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

/* Sélecteur de quantité */
.fl-qty-wrap {
  display: flex;
  align-items: center;
  height: 2.5rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.6rem;
  overflow: hidden;
  flex: 1;
}
/* Supprime le délai 300ms et le zoom double-tap sur mobile */
.fl-qty-btn,
.fl-qty-val,
.fl-cart-btn .btn-product,
.fl-cart-btn .add-to-cart,
.fl-cart-btn button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.fl-qty-btn {
  width: 2rem;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: #374151;
  padding: 0;
  transition: background 0.15s;
  flex-shrink: 0;
}
.fl-qty-btn:hover { background: #e5e7eb; }
.fl-qty-val {
  flex: 1;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 1rem;        /* ≥ 16px : empêche le zoom auto iOS */
  font-weight: 600;
  color: #111827;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.fl-qty-val::-webkit-outer-spin-button,
.fl-qty-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fl-qty-val:focus { outline: none; }

/* Bouton panier — restyle du bouton PrestaShop en bouton carré "+" */
.fl-cart-btn { flex-shrink: 0; }

.fl-cart-btn .btn-product,
.fl-cart-btn .add-to-cart,
.fl-cart-btn button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: #394873;
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  font-size: 0;           /* masque le texte "Ajouter au panier" */
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(57,72,115,0.3);
  text-decoration: none;
  padding: 0;
}
.fl-cart-btn .btn-product:hover,
.fl-cart-btn .add-to-cart:hover,
.fl-cart-btn button:hover {
  background: #2f3c60;
  transform: scale(1.06);
}
/* Icône "+" via ::after */
.fl-cart-btn .btn-product::after,
.fl-cart-btn .add-to-cart::after,
.fl-cart-btn button::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: #fff;
}
/* Masquer l'icône Material Icons originale si présente */
.fl-cart-btn .material-icons { display: none; }

/* État "rupture de stock" — bouton grisé */
.fl-cart-btn .btn-product:disabled,
.fl-cart-btn .add-to-cart:disabled,
.fl-cart-btn button:disabled,
.fl-cart-btn .btn-product.disabled,
.fl-cart-btn .add-to-cart.disabled,
.fl-cart-btn button.disabled {
  background: #d1d5db;
  color: #9ca3af;
  box-shadow: none;
  cursor: not-allowed;
}
.fl-cart-btn .btn-product:disabled::after,
.fl-cart-btn .add-to-cart:disabled::after,
.fl-cart-btn button:disabled::after,
.fl-cart-btn .btn-product.disabled::after,
.fl-cart-btn .add-to-cart.disabled::after,
.fl-cart-btn button.disabled::after {
  content: "\2715"; /* ✕ */
  font-size: 1rem;
  font-weight: 700;
}
@media (hover: hover) {
  .fl-cart-btn .btn-product:disabled:hover,
  .fl-cart-btn .add-to-cart:disabled:hover,
  .fl-cart-btn button:disabled:hover,
  .fl-cart-btn .btn-product.disabled:hover,
  .fl-cart-btn .add-to-cart.disabled:hover,
  .fl-cart-btn button.disabled:hover {
    background: #d1d5db;
    transform: none;
    cursor: not-allowed;
  }
}

/* État "ajouté au panier" — bouton vert avec coche */
.fl-cart-btn.fl-cart-added .btn-product,
.fl-cart-btn.fl-cart-added .add-to-cart,
.fl-cart-btn.fl-cart-added button {
  background: #16a34a;
  box-shadow: 0 2px 8px rgba(22,163,74,0.35);
}
.fl-cart-btn.fl-cart-added .btn-product:hover,
.fl-cart-btn.fl-cart-added .add-to-cart:hover,
.fl-cart-btn.fl-cart-added button:hover {
  background: #15803d;
  transform: scale(1.06);
}
.fl-cart-btn.fl-cart-added .btn-product::after,
.fl-cart-btn.fl-cart-added .add-to-cart::after,
.fl-cart-btn.fl-cart-added button::after {
  content: "\2713";  /* ✓ */
  font-size: 1.1rem;
  font-weight: 700;
}

/* ── Déclinaisons dans la carte produit ── */
.fl-product-variants {
  margin-top: 0.6rem;
  margin-bottom: 0.4rem;
}

/* Liens de variantes (swatches couleur ou boutons taille) */
.fl-product-variants ul,
.fl-product-variants .product-variants-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fl-product-variants li { margin: 0; padding: 0; }

/* Boutons texte (taille, etc.) */
.fl-product-variants a[data-id-product-attribute],
.fl-product-variants .variant-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  background: #f9fafb;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.fl-product-variants a[data-id-product-attribute]:hover,
.fl-product-variants .variant-link:hover {
  border-color: #394873;
  background: #eef0f5;
  color: #394873;
}
.fl-product-variants a[data-id-product-attribute].active,
.fl-product-variants .variant-link.active {
  border-color: #394873;
  background: #394873;
  color: #fff;
}

/* Swatches couleur */
.fl-product-variants .color-option,
.fl-product-variants a.color {
  width: 1.4rem;
  height: 1.4rem;
  min-width: 1.4rem;
  border-radius: 50%;
  padding: 0;
  border: 2px solid #e5e7eb;
}
.fl-product-variants a.color.active {
  border-color: #394873;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #394873;
}

/* Wrapper d'un groupe de déclinaison (ex : Taille) */
.fl-variant-group-wrap {
  margin-top: 0.45rem;
  width: 100%;
}

/* Select type (si variant-links.tpl génère un <select>, ou notre groupe custom) */
.fl-product-variants select,
.fl-variant-group-select {
  width: 100%;
  height: 2rem;
  padding: 0 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.4rem;
  font-size: 0.9rem;
  color: #374151;
  background: #f9fafb;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23374151'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  font-family: "Inter", sans-serif;
}
.fl-product-variants select:focus {
  outline: none;
  border-color: #394873;
}

/* ============================================================
   LOGO NAVIGATION — blanc en haut, couleur après scroll
   ============================================================ */
.absolute-header #_desktop_logo img {
  filter: brightness(0) invert(1); /* blanc sur hero */
  transition: filter 0.35s ease;
}
.absolute-header.fl-nav-scrolled #_desktop_logo img {
  filter: none; /* couleur originale après scroll */
}

/* ============================================================
   NAVBAR — liens et icônes : blanc sur hero, sombre après scroll
   ============================================================ */

/* État par défaut : blanc + transition */
.absolute-header #_desktop_megamenu .menu-content a,
.absolute-header #_desktop_megamenu .menu-content a span,
.absolute-header #_desktop_megamenu .menu-content a i,
.absolute-header .pos-search__toggle i,
.absolute-header .pos-account .account-login,
.absolute-header .pos-account .account-login i,
.absolute-header #_desktop_cart_block .blockcart > a,
.absolute-header #_desktop_cart_block .blockcart > a i,
.absolute-header #_desktop_cart_block .cart-products-total,
.absolute-header #_desktop_cart_block  {
  
  transition: color 0.35s ease;
}

/* État scrollé : gris foncé */
.absolute-header.fl-nav-scrolled #_desktop_megamenu .menu-content a,
.absolute-header.fl-nav-scrolled #_desktop_megamenu .menu-content a span,
.absolute-header.fl-nav-scrolled #_desktop_megamenu .menu-content a i,
.absolute-header.fl-nav-scrolled .pos-search__toggle i,
.absolute-header.fl-nav-scrolled .pos-account .account-login,
.absolute-header.fl-nav-scrolled .pos-account .account-login i,
.absolute-header.fl-nav-scrolled #_desktop_cart_block .blockcart > a,
.absolute-header.fl-nav-scrolled #_desktop_cart_block .blockcart > a i,
.absolute-header.fl-nav-scrolled #_desktop_cart_block .cart-products-total,
.absolute-header.fl-nav-scrolled #_desktop_cart_block {
  color: #1f2937 !important;
}

/* ============================================================
   PAGE CATÉGORIE — Bandeau hero + pills sous-catégories
   ============================================================ */

/* ── Bandeau hero ── */
.fl-cat-banner {
  position: relative;
  height: 320px;
  overflow: hidden;
  margin-top: -20px;
  
}
.fl-cat-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.fl-cat-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.65) 100%);
  z-index: 1;
}
.fl-cat-banner-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 2;
}

/* Fil d'Ariane */
.fl-cat-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  margin-bottom: 0.6rem;
}
.fl-cat-breadcrumb a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.fl-cat-breadcrumb a:hover { color: #fff; }
.fl-cat-breadcrumb .fl-bc-sep  { color: rgba(255,255,255,0.45); }
.fl-cat-breadcrumb .fl-bc-current { color: #fff; }

/* Titre */
.fl-cat-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
  line-height: 1.15;
}

/* Description */
.fl-cat-desc {
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  max-width: 580px;
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .fl-cat-banner { height: 240px; }
  .fl-cat-title  { font-size: 1.7rem; }
  .fl-cat-desc   { font-size: 0.9rem; }
}

/* ── Pills sous-catégories ── */
.fl-subcat-bar {
  background: #fff;
  border-bottom: 1px solid #f3f4f6;
  
}
.fl-subcat-bar .container {
  overflow: visible;
  max-width: 100%;
}
.fl-subcat-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
/* Flèches */
.fl-subcat-arrow {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #394873;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  transition: background 0.2s, color 0.2s;
  z-index: 2;
}
.fl-subcat-arrow:hover { background: #394873; color: #fff; }
.fl-subcat-arrow[hidden] { display: none; }
.fl-subcat-arrow--prev { margin-right: 0.4rem; }
.fl-subcat-arrow--next { margin-left:  0.4rem; }
.fl-subcat-pills {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  padding: 1.9rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  cursor: grab;
}
.fl-subcat-pills::-webkit-scrollbar { display: none; }
.fl-subcat-dragging,
.fl-subcat-dragging * { cursor: grabbing !important; user-select: none; }
.fl-subcat-pill {
  flex-shrink: 0;
  padding: 0.38rem 1.1rem;
  border-radius: 9999px;
  font-size: 1.2rem;
  font-weight: 500;
  text-decoration: none;
  background: #f3f4f6;
  color: #374151;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.fl-subcat-pill:hover,
.fl-subcat-pill--active {
  background: #394873;
  color: #fff;
}

.mt20 {
  margin-top: 20px;
}

/* ============================================================
   NAVBAR — Sous-menu : animation de survol soignée
   ============================================================ */

.pos-menu-horizontal .menu-dropdown .pos-sub-inner li a,
.pos-menu-horizontal .menu-dropdown .pos-sub-inner li a span {
  transition: color 0.22s ease,
              padding-left 0.22s ease,
              background 0.22s ease !important;
}

.pos-menu-horizontal .menu-dropdown .pos-sub-inner li a {
  position: relative;
  display: block;
  overflow: hidden;
}

/* Barre accent gauche */
.pos-menu-horizontal .menu-dropdown .pos-sub-inner li a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: #394873;
  border-radius: 0 2px 2px 0;
  transform: translateY(-50%);
  transition: height 0.22s ease, opacity 0.22s ease;
  opacity: 0;
}

.pos-menu-horizontal .menu-dropdown .pos-sub-inner li a:hover::before {
  height: 55%;
  opacity: 1;
}

.pos-menu-horizontal .menu-dropdown .pos-sub-inner li a:hover,
.pos-menu-horizontal .menu-dropdown .pos-sub-inner li a:hover span {
  color: #394873 !important;
  padding-left: 0.4rem !important;
  background: rgba(57, 72, 115, 0.04);
}