/* ══════════════════════════════════════════════════════════════════
   Pages catalogue — habillage (11/09/2026)
   textile · textile-grossiste (+ hero/bande info des autres catégories :
   bache, panneaux, rollup, signaletique, imprimerie).
   Chargée APRÈS pages.css : surcharge sans y toucher.
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero : clair, aux couleurs de la marque (fini le bleu plein) ──── */
.cat-hero {
  background: linear-gradient(135deg, #fff4f9 0%, #f4f5ff 55%, #ffffff 100%);
  color: var(--dark, #111827);
  padding: 52px 0 58px;
}
.cat-hero::before {
  background:
    radial-gradient(520px 300px at 88% 40%, rgba(236, 72, 153, .18), transparent 70%),
    radial-gradient(420px 280px at 68% 10%, rgba(99, 102, 241, .16), transparent 70%),
    radial-gradient(300px 220px at 96% 95%, rgba(245, 158, 11, .16), transparent 70%);
}
.cat-hero__crumb { opacity: 1; color: var(--text-muted, #6b7280); }
.cat-hero__crumb a { color: var(--text-muted, #6b7280); }
.cat-hero__crumb a:hover { color: var(--pink, #ec4899); text-decoration: none; }
.cat-hero__title { color: var(--dark, #111827); letter-spacing: -.02em; max-width: 760px; }
.cat-hero__sub { color: #4b5563; opacity: 1; font-size: 17px; max-width: 600px; }
.cat-hero__pill {
  background: #fff; color: var(--dark, #111827);
  border: 1px solid #f3d3e3; box-shadow: 0 2px 8px rgba(180, 60, 130, .08);
  backdrop-filter: none;
}
.cat-hero__pill i { color: var(--pink, #ec4899); margin-right: 4px; }

/* ── Bande avantages : cartes légères, icônes en pastilles ────────── */
.cat-info-band { background: transparent; border: 0; padding: 0 0 8px; margin-top: -30px; position: relative; z-index: 2; }
.cat-info-band__inner {
  gap: 14px; background: #fff; border: 1px solid #eef0f3; border-radius: 18px;
  padding: 16px 18px; box-shadow: 0 10px 30px rgba(17, 24, 39, .06);
}
.cat-info-item { padding: 6px 8px; border-right: 0; }
.cat-info-item i {
  width: 42px; height: 42px; border-radius: 12px; font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #fce7f3, #e0e7ff); color: #be185d;
}
.cat-info-item:nth-child(2) i { background: #e0f2fe; color: #0369a1; }
.cat-info-item:nth-child(3) i { background: #dcfce7; color: #15803d; }
.cat-info-item:nth-child(4) i { background: #fef3c7; color: #b45309; }
@media (max-width: 900px) { .cat-info-band { margin-top: 0; padding-top: 18px; } }

/* ── Bandeau tarifs (visiteur) ────────────────────────────────────── */
.cat-tarif-banner { background: transparent; border: 0; }
.cat-tarif-banner__inner {
  background: linear-gradient(90deg, #fff7ed, #fdf2f8); border: 1px solid #fde2e7;
  border-radius: 14px; padding: 12px 18px; margin-top: 14px;
}

/* ── Zone catalogue ───────────────────────────────────────────────── */
.cat-catalog { background: linear-gradient(180deg, #fff 0%, #f7f8fb 160px, #f7f8fb 100%); padding-top: 40px; }
.cat-catalog .section__header h2 { letter-spacing: -.02em; }

/* Barre de recherche : un seul bloc blanc arrondi */
.textile-filters {
  background: #fff; border: 1px solid #eef0f3; border-radius: 16px;
  padding: 12px; box-shadow: 0 6px 20px rgba(17, 24, 39, .04);
}
.textile-filters input[type=search], .textile-filters select {
  border-radius: 12px; border-color: #e5e7eb; background-color: #fafafa; font-size: 14.5px;
}
.textile-filters input[type=search] {
  padding-left: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
  background-repeat: no-repeat; background-position: 14px center;
}
.textile-filters input[type=search]:focus, .textile-filters select:focus {
  background-color: #fff; border-color: var(--pink, #ec4899); box-shadow: 0 0 0 3px rgba(236, 72, 153, .12);
}
.textile-filters__chk input[type=checkbox] { accent-color: var(--pink, #ec4899); }

/* Nombre de résultats + bouton Filtres (mobile) */
.textile-results__count { font-weight: 600; color: #374151; }
.textile-results__count::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pink, #ec4899); margin-right: 8px; vertical-align: 1px; }
.textile-filters-toggle { border-radius: 12px; }
.textile-filters-toggle__n { background: var(--pink, #ec4899); }

/* ── Colonne de filtres ───────────────────────────────────────────── */
/* Colonnes bureau seulement : sous 900 px le volet est fixé hors flux et
   les résultats doivent occuper toute la largeur (pages.css : 1fr). */
@media (min-width: 901px) { .textile-catalog { grid-template-columns: 272px minmax(0, 1fr); gap: 30px; } }
.textile-sidebar {
  border-radius: 16px; border-color: #eef0f3;
  box-shadow: 0 6px 20px rgba(17, 24, 39, .04);
  /* sous l'en-tête + la barre de navigation (sticky tous les deux) */
  top: calc(var(--header-h, 80px) + var(--navbar-h, 52px) + 16px);
  max-height: calc(100vh - var(--header-h, 80px) - var(--navbar-h, 52px) - 32px);
  overflow-y: auto;
}
.textile-sidebar__head { background: linear-gradient(135deg, #fff1f7, #eef2ff); border-bottom-color: #f1e6ee; }
.textile-sidebar__head h3::before {
  content: '\f1de'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  width: 28px; height: 28px; border-radius: 8px; background: #fff; color: #be185d;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.textile-sidebar__n, .tx-acc__badge { background: var(--pink, #ec4899); }
.textile-sidebar__clear { color: #be185d; }
.tx-acc { border-bottom-color: #f1f3f5; }
.tx-acc__head { font-size: 13.5px; }
.tx-acc__icon { color: #9ca3af; }
.tx-opt { border-radius: 10px; }
.tx-opt:hover { background: #fdf2f8; }
.tx-opt__box { border-radius: 6px; border-color: #d1d5db; }
.tx-opt.is-active .tx-opt__box { background: var(--pink, #ec4899); border-color: var(--pink, #ec4899); }
.tx-opt__n { background: #f3f4f6; border-radius: 999px; padding: 1px 7px; font-size: 11px; }
@media (max-width: 900px) {
  /* Volet coulissant. `align-self: start` (mode bureau, pages.css) fait
     qu'un élément fixé avec top/bottom prend la hauteur de son CONTENU :
     2 000 px, aucun défilement interne possible et la page bloquée
     derrière. Hauteur = l'écran, seul le corps défile, bouton en pied. */
  .textile-sidebar {
    top: 0; bottom: 0; align-self: stretch;
    height: 100vh; height: 100dvh; max-height: none;
    border-radius: 0; overflow: hidden;
  }
  .textile-sidebar__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
  .textile-sidebar__head { flex: 0 0 auto; }
  .textile-sidebar__foot { flex: 0 0 auto; }
  .textile-sidebar__apply { background: var(--gradient-brand, var(--pink, #ec4899)); border-radius: 12px; }
  .tx-opt { padding: 9px 6px; }
}

/* ── Titres de familles ───────────────────────────────────────────── */
.textile-section { margin-bottom: 44px; }
.textile-section__title {
  border-bottom: 0; padding: 0 0 0 14px; margin-bottom: 18px; font-size: 20px;
  position: relative; align-items: center;
}
.textile-section__title::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
  border-radius: 4px; background: var(--gradient-brand, linear-gradient(180deg, #1681c4, #ec4899));
}
.textile-section__count { background: #fff; border: 1px solid #eef0f3; color: #6b7280; font-size: 12px; }

/* ── Cartes produit : vraies cartes, image sur fond doux ──────────── */
.tx-card {
  background: #fff; border: 1px solid #eef0f3; border-radius: 18px;
  padding: 10px 10px 14px; gap: 10px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tx-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(17, 24, 39, .09); border-color: #f9a8d4; }
.tx-card:focus-visible { border-radius: 18px; }
.tx-card__img { border-radius: 12px; background: linear-gradient(180deg, #f8f9fb, #f1f3f6); }
.tx-card__img img { padding: 8px; mix-blend-mode: multiply; }
.tx-card__chip { background: #fff; border: 1px solid #eef0f3; box-shadow: none; bottom: 8px; left: 8px; }
.tx-card__quick { background: var(--gradient-brand, #111827); box-shadow: 0 8px 18px rgba(180, 60, 130, .3); font-size: 12.5px; }
.tx-card__flag { top: 8px; left: 8px; }
.tx-card__body { padding: 0 4px; gap: 4px; }
.tx-card__brand { font-size: 10px; color: #9ca3af; }
.tx-card__name { font-weight: 600; font-size: 14px; }
.tx-card__desc { color: #9ca3af; }
.tx-card__price { font-size: 16px; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.tx-card__price .tx-card__price-from { font-size: 11px; }
.tx-card__lock {
  margin-top: 6px; font-size: 12px;
  background: #fdf2f8; color: #9d174d; border-radius: 999px; padding: 5px 11px;
  align-self: flex-start;
}
.tx-card__lock i { color: #be185d; }
.tx-card__lock a { color: #9d174d; }
.tx-card__swatches { margin-top: 6px; gap: 5px; }
.tx-card__swatch { width: 14px; height: 14px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
@media (max-width: 600px) {
  .tx-card { padding: 7px 7px 10px; border-radius: 14px; gap: 6px; }
  .tx-card__body { padding: 0 2px; gap: 3px; }
  .tx-card__brand { font-size: 9.5px; letter-spacing: .06em; }
  .tx-card__name { font-size: 13px; font-weight: 600; min-height: 34px; }
  .tx-card__price { font-size: 14.5px; margin-top: 2px; }
  .tx-card__lock { font-size: 11px; padding: 4px 9px; margin-top: 4px; }
  .tx-card__swatches { margin-top: 4px; gap: 4px; }
  .tx-card__swatch { width: 12px; height: 12px; }
  .tx-card__chip { font-size: 10px; padding: 4px 8px; }
  .textile-section__title { font-size: 17px; }
  .textile-filters { padding: 10px; border-radius: 14px; }
  .textile-pager button { padding: 9px 14px; font-size: 13px; }
}

/* Best-sellers */
.tx-bestsellers {
  background: linear-gradient(135deg, #fff7ed, #fdf2f8); border: 1px solid #fde2e7;
  border-radius: 18px; padding: 20px 20px 22px; margin-bottom: 34px;
}
.tx-bestsellers__head h3 i { width: 30px; height: 30px; border-radius: 9px; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }

/* Pagination */
.textile-pager { gap: 10px; margin-top: 36px; }
.textile-pager button {
  border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 13.5px;
  border-color: #e5e7eb; transition: all .15s ease;
}
.textile-pager button:not(:disabled):hover { border-color: var(--pink, #ec4899); color: #be185d; }
.textile-pager span { background: #fff; border: 1px solid #eef0f3; border-radius: 999px; padding: 8px 14px; }

/* Onglets description : carte plus douce */
.product-tabs-section .tabs-nav { border-radius: 14px; }

/* ── Grands écrans : le catalogue s'élargit (1280 px flottait sur un 27") ── */
@media (min-width: 1400px) {
  .cat-hero .container, .cat-info-band .container, .cat-tarif-banner .container,
  .cat-catalog .container, .product-tabs-section .container, .related-section .container { max-width: 1500px; }
  .textile-catalog { grid-template-columns: 290px minmax(0, 1fr); gap: 34px; }
  .tx-bestsellers__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* pages.css force 4 colonnes en `body #textileGrid … !important` (dernière
     section du fichier) : même spécificité, plus tard dans la cascade → 5. */
  body #textileGrid .textile-section__grid, body .textile-grid .textile-section__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 24px 20px !important;
  }
}
@media (min-width: 1800px) {
  .cat-hero .container, .cat-info-band .container, .cat-tarif-banner .container,
  .cat-catalog .container, .product-tabs-section .container, .related-section .container { max-width: 1760px; }
  .textile-catalog { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; }
  .tx-bestsellers__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body #textileGrid .textile-section__grid, body .textile-grid .textile-section__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 26px 22px !important;
  }
}

/* Volet de filtres ouvert : le bouton flottant « Signaler un bug » s'efface
   (il recouvrait le bouton « Voir les produits »). */
body:has(.textile-sidebar.is-open) #br-fab { display: none !important; }