/* =========================================================
   UNITRADE — Matériel scientifique
   Extension de style.css — ne redéfinit pas les tokens globaux
   Signature : grille millimétrée de cahier + étiquette de
   flacon réactif + reliure d'herbier pour les planches murales
   ========================================================= */

.sci-body{ background: var(--sci-bg); }

/* ---------- Hero ---------- */
.sci-hero{
  position: relative; overflow: hidden;
  padding: 150px var(--pad) 70px;
  max-width: var(--container); margin: 0 auto;
}
.sci-hero-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(47,111,99,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,111,99,0.10) 1px, transparent 1px);
  background-size: 9px 9px, 9px 9px;
}
.sci-hero-grid::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(47,111,99,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,111,99,0.16) 1px, transparent 1px);
  background-size: 90px 90px, 90px 90px;
  mask-image: radial-gradient(circle at 22% 30%, black 0%, transparent 65%);
}
.sci-hero-inner{ position:relative; z-index:2; max-width: 680px; }
.sci-eyebrow{
  font-family: var(--font-mono); font-size: 13px; letter-spacing:.04em;
  color: var(--sci-teal-dark); text-transform: uppercase; margin: 0 0 20px;
  display:flex; align-items:center; gap:8px;
}
.sci-title{
  font-family: var(--font-display); font-weight:600; line-height: 0.99;
  font-size: clamp(38px, 6vw, 68px); margin: 0 0 22px; color: var(--sci-ink);
}
.sci-title em{ font-style: italic; color: var(--sci-coral); font-weight:500; }
.sci-title .line{ display:block; overflow:hidden; }
.sci-sub{ font-size: 16.5px; line-height:1.65; color: var(--ink-soft); max-width: 480px; margin: 0 0 30px; }

.sci-hero-stats{ display:flex; gap: 30px; flex-wrap: wrap; margin-top: 8px; }
.sci-stat{ display:flex; flex-direction:column; }
.sci-stat-num{ font-family: var(--font-display); font-size: 34px; font-weight:600; color: var(--sci-teal); line-height:1; }
.sci-stat-label{ font-size: 12px; color: var(--ink-soft); max-width:120px; margin-top:4px; line-height:1.35; }

/* Specimen jars decorative element */
.sci-hero-visual{
  position:absolute; right: clamp(0px, 3vw, 50px); top: 46%; transform: translateY(-46%);
  width: min(34vw, 380px); z-index:1; pointer-events:none;
}
.sci-hero-visual img{ width:100%; filter: drop-shadow(0 26px 44px rgba(28,43,39,0.18)); }
.sci-hero-tag{
  position:absolute; bottom: 4%; left:50%; transform: translateX(-50%);
  background: var(--white); border:1px solid rgba(47,111,99,0.18); border-radius:999px;
  padding: 7px 15px; font-family: var(--font-mono); font-size:12px; color: var(--sci-teal-dark);
  box-shadow: 0 10px 22px rgba(28,43,39,0.1); white-space:nowrap;
}

/* =========================================================
   FILTER BAR — sticky, façon étagère de labo
   ========================================================= */
.sci-filterbar-wrap{
  position: sticky; top: 0; z-index: 500;
  background: rgba(243,246,244,0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(28,43,39,0.1);
}
.sci-filterbar{
  max-width: var(--container); margin: 0 auto; padding: 16px var(--pad);
  display:flex; align-items:center; gap: 10px; flex-wrap: wrap;
}
.sci-filter-label{
  font-family: var(--font-mono); font-size: 11.5px; color: var(--slate);
  text-transform: uppercase; letter-spacing:.04em; margin-right: 6px;
}
.sci-filter-btn{
  font-size: 13.5px; font-weight:600; color: var(--sci-ink);
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid rgba(28,43,39,0.14);
  background: var(--white); transition: background .25s, color .25s, border-color .25s, transform .25s;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.sci-filter-btn .count{
  font-family: var(--font-mono); font-size: 11px; opacity:.6;
}
.sci-filter-btn:hover{ transform: translateY(-2px); border-color: var(--sci-teal); }
.sci-filter-btn.is-active{
  background: var(--sci-ink); color: var(--sci-paper); border-color: var(--sci-ink);
}
.sci-filter-btn .swatch-dot{
  width:8px; height:8px; border-radius:50%; background: var(--dot, var(--sci-teal)); flex-shrink:0;
}
.sci-search{
  margin-left: auto; position: relative; min-width: 200px;
}
.sci-search input{
  width:100%; padding: 9px 16px 9px 36px; border-radius: 999px; border: 1.5px solid rgba(28,43,39,0.14);
  background: var(--white); font-size: 13.5px; font-family: var(--font-body); color: var(--sci-ink);
  transition: border-color .25s;
}
.sci-search input:focus{ outline:none; border-color: var(--sci-teal); }
.sci-search input::placeholder{ color: var(--slate); }
.sci-search-icon{
  position:absolute; left:13px; top:50%; transform: translateY(-50%); color: var(--slate); font-size:14px; pointer-events:none;
}

/* =========================================================
   CATEGORY SECTIONS
   ========================================================= */
.sci-catalogue{ max-width: var(--container); margin: 0 auto; padding: 60px var(--pad) 20px; }

.sci-category{ padding: 50px 0 30px; border-top: 1px dashed rgba(28,43,39,0.18); scroll-margin-top: 90px; }
.sci-category:first-child{ border-top: none; padding-top: 10px; }
.sci-category-head{ display:flex; align-items:baseline; justify-content:space-between; gap: 20px; margin-bottom: 34px; flex-wrap:wrap; }
.sci-category-title-wrap{ display:flex; align-items:center; gap: 14px; }
.sci-category-num{
  font-family: var(--font-mono); font-size: 13px; color: var(--sci-coral);
  border: 1.5px solid var(--sci-coral); border-radius: 50%; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sci-category-title{
  font-family: var(--font-display); font-weight:600; font-size: clamp(24px, 2.6vw, 34px);
  color: var(--sci-ink); margin: 0;
}
.sci-category-sub{ font-size: 14px; color: var(--ink-soft); margin: 0; max-width: 480px; }
.sci-category-count{
  font-family: var(--font-mono); font-size: 12px; color: var(--sci-teal-dark);
  background: rgba(47,111,99,0.1); padding: 6px 13px; border-radius: 999px; white-space:nowrap;
}

/* ---------- Product grid ---------- */
.sci-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}

.sci-card{
  background: var(--white); border: 1px solid rgba(28,43,39,0.1); border-radius: 16px;
  overflow:hidden; display:flex; flex-direction:column;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
  position: relative; isolation: isolate;
}
.sci-card:hover{ transform: translateY(-5px); box-shadow: 0 20px 38px rgba(28,43,39,0.13); border-color: rgba(28,43,39,0.05); }

.sci-card-media{
  position: relative; aspect-ratio: 4/3.2; background: var(--sci-paper);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sci-card-media img{
  width: 80%; height: 80%; object-fit: contain; will-change: transform;
  transition: transform .5s var(--ease-out);
  mix-blend-mode: normal;
}
.sci-card:hover .sci-card-media img{ transform: scale(1.07); }
.sci-card-ref{
  position:absolute; top: 12px; left: 12px; z-index:2;
  background: var(--sci-ink); color: var(--sci-paper);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing:.02em;
  padding: 5px 10px; border-radius: 999px;
}
.sci-card-fav{
  position:absolute; top:12px; right:12px; z-index:2;
  width: 30px; height:30px; border-radius:50%; background: rgba(255,255,255,0.85);
  display:flex; align-items:center; justify-content:center; font-size:13px; color: var(--sci-teal-dark);
  opacity:0; transform: scale(.8); transition: opacity .25s, transform .25s;
}
.sci-card:hover .sci-card-fav{ opacity:1; transform: scale(1); }

.sci-card-body{ padding: 18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.sci-card-kicker{
  font-family: var(--font-mono); font-size: 11px; color: var(--sci-teal-dark);
  text-transform: uppercase; letter-spacing:.03em; margin: 0 0 6px;
}
.sci-card-name{
  font-family: var(--font-display); font-weight:600; font-size: 17px; line-height:1.25;
  color: var(--sci-ink); margin: 0 0 10px;
}
.sci-card-specs{ font-size: 12.8px; color: var(--ink-soft); line-height:1.55; margin: 0 0 14px; flex:1; }
.sci-card-specs li{ position:relative; padding-left:12px; margin-bottom:3px; }
.sci-card-specs li::before{
  content:""; position:absolute; left:0; top:8px; width:4px; height:4px; background: var(--sci-coral); border-radius:50%;
}
.sci-card-foot{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-top: auto; }
.sci-card-link{
  font-size: 13px; font-weight:700; color: var(--sci-ink);
  display:inline-flex; align-items:center; gap:6px; border-bottom: 1.5px solid var(--sci-ink); padding-bottom:2px;
}
.sci-card-link .arrow{ transition: transform .3s var(--ease-out); }
.sci-card:hover .sci-card-link .arrow{ transform: translateX(4px); }
.sci-card:hover .sci-card-link{ color: var(--sci-coral); border-color: var(--sci-coral); }

/* Dimension tag chip on some cards (large items / wall maps) */
.sci-dim-chip{
  font-family: var(--font-mono); font-size: 10.5px; color: var(--sci-teal-dark);
  background: rgba(47,111,99,0.08); padding: 4px 9px; border-radius:999px; white-space:nowrap;
}

/* ---------- Wide variant for poster/map/skeleton items ---------- */
.sci-card-wide{ grid-column: span 1; }
.sci-card.is-hidden{ display:none; }

/* "Composé de" expandable list (kit chimie, mallette) */
.sci-card-kit-toggle{
  font-family: var(--font-mono); font-size: 11px; color: var(--sci-teal-dark);
  text-decoration: underline; text-underline-offset:2px; cursor:pointer; margin: 0 0 12px; display:inline-block;
}

/* =========================================================
   EMPTY STATE (no results from filters)
   ========================================================= */
.sci-empty{
  text-align:center; padding: 90px 20px; display:none;
}
.sci-empty.is-visible{ display:block; }
.sci-empty p{ color: var(--ink-soft); font-size:15px; margin: 14px 0 18px; }
.sci-empty-reset{
  font-family: var(--font-mono); font-size: 13px; color: var(--sci-teal-dark);
  border: 1.5px solid var(--sci-teal); border-radius:999px; padding: 9px 18px; display:inline-flex;
}
.sci-empty-reset:hover{ background: var(--sci-teal); color: var(--white); }

/* =========================================================
   CTA band before footer
   ========================================================= */
.sci-cta-band{
  background: var(--sci-ink); color: var(--sci-paper);
  margin: 80px 0 0; padding: 70px var(--pad);
}
.sci-cta-inner{
  max-width: var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap: 30px; flex-wrap:wrap;
}
.sci-cta-inner h2{
  font-family: var(--font-display); font-weight:600; font-size: clamp(26px, 3vw, 38px); margin:0; max-width: 520px;
}
.sci-cta-inner h2 em{ color: var(--sci-coral); font-style: italic; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px){
  .sci-grid{ grid-template-columns: repeat(2, 1fr); }
  .sci-hero-visual{ display:none; }
}
@media (max-width: 980px){
  .sci-filterbar{ overflow-x:auto; flex-wrap: nowrap; padding-bottom: 14px; }
  .sci-search{ min-width: 160px; }
}
@media (max-width: 640px){
  .sci-grid{ grid-template-columns: 1fr; }
  .sci-hero{ padding-top: 120px; }
  .sci-category-head{ flex-direction:column; align-items:flex-start; }
  .sci-cta-inner{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   JS-DEPENDENT STATES (sticky bar, 3D tilt, kit details)
   ========================================================= */
.sci-filterbar-wrap.is-stuck{
  box-shadow: 0 8px 24px rgba(28,43,39,0.08);
  border-bottom-color: rgba(28,43,39,0.16);
}
.sci-card-media{ transform-style: preserve-3d; }
.sci-card-kit-detail{ height: 0; overflow: hidden; }
.sci-card-kit-detail.is-open{ margin-bottom: 14px; }

/* =========================================================
   CATEGORY PAGE — compact hero + breadcrumb + sibling nav
   ========================================================= */
.sci-breadcrumb{
  max-width: var(--container); margin: 0 auto; padding: 110px var(--pad) 0;
  display:flex; align-items:center; gap: 8px; font-family: var(--font-mono);
  font-size: 12.5px; color: var(--slate); flex-wrap: wrap;
}
.sci-breadcrumb a{ color: var(--slate); transition: color .2s; }
.sci-breadcrumb a:hover{ color: var(--sci-teal-dark); }
.sci-breadcrumb .sep{ opacity:.5; }
.sci-breadcrumb .current{ color: var(--sci-ink); font-weight:600; }

.sci-cat-hero{
  position: relative; overflow: hidden;
  max-width: var(--container); margin: 0 auto; padding: 28px var(--pad) 50px;
  display:grid; grid-template-columns: 1.3fr 0.9fr; gap: 50px; align-items:center;
}
.sci-cat-hero-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(47,111,99,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,111,99,0.08) 1px, transparent 1px);
  background-size: 9px 9px, 9px 9px;
  mask-image: radial-gradient(circle at 10% 20%, black 0%, transparent 55%);
}
.sci-cat-hero-text{ position:relative; z-index:2; }
.sci-cat-num-badge{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
}
.sci-cat-num-badge .num{
  font-family: var(--font-mono); font-size: 13px; color: var(--cat-dot, var(--sci-coral));
  border: 1.5px solid var(--cat-dot, var(--sci-coral)); border-radius: 50%; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sci-cat-title{
  font-family: var(--font-display); font-weight:600; line-height: 0.99;
  font-size: clamp(32px, 5vw, 56px); margin: 0 0 20px; color: var(--sci-ink);
}
.sci-cat-title em{ font-style: italic; color: var(--sci-coral); font-weight:500; }
.sci-cat-sub{ font-size: 15.5px; line-height:1.65; color: var(--ink-soft); max-width: 480px; margin: 0 0 26px; }
.sci-cat-count-pill{
  display:inline-flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size:13px;
  background: rgba(47,111,99,0.1); color: var(--sci-teal-dark); padding: 8px 16px; border-radius:999px;
}

.sci-cat-hero-visual{ position:relative; z-index:1; aspect-ratio: 1/1; border-radius: 22px; overflow:hidden;
  background: var(--sci-paper); display:flex; align-items:center; justify-content:center;
}
.sci-cat-hero-visual img{ width:78%; height:78%; object-fit:contain; filter: drop-shadow(0 20px 34px rgba(28,43,39,0.16)); }
.sci-cat-hero-tag{
  position:absolute; bottom: 16px; left: 16px; right:16px;
  background: var(--white); border:1px solid rgba(47,111,99,0.16); border-radius:999px;
  padding: 8px 16px; font-family: var(--font-mono); font-size:11.5px; color: var(--sci-teal-dark);
  box-shadow: 0 10px 22px rgba(28,43,39,0.1); text-align:center;
}

/* Sibling category quick-nav (chips to jump to the other 5 categories) */
.sci-sibling-nav{
  max-width: var(--container); margin: 0 auto; padding: 0 var(--pad) 30px;
  display:flex; gap: 10px; flex-wrap: wrap; align-items:center;
}
.sci-sibling-nav .label{
  font-family: var(--font-mono); font-size:11.5px; color: var(--slate); text-transform:uppercase; letter-spacing:.04em;
  margin-right: 4px;
}
.sci-sibling-chip{
  font-size: 13px; font-weight:600; color: var(--sci-ink);
  padding: 8px 15px; border-radius: 999px; border: 1.5px solid rgba(28,43,39,0.14);
  background: var(--white); display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  transition: border-color .25s, transform .25s;
}
.sci-sibling-chip:hover{ border-color: var(--sci-teal); transform: translateY(-2px); }
.sci-sibling-chip .dot{ width:7px; height:7px; border-radius:50%; background: var(--chip-dot, var(--sci-teal)); }
.sci-sibling-chip.is-current{ background: var(--sci-ink); color: var(--sci-paper); border-color: var(--sci-ink); }

/* Local search-only bar (no category filter pills, since the page IS the category) */
.sci-local-toolbar{
  max-width: var(--container); margin: 0 auto; padding: 0 var(--pad) 10px;
  display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap:wrap;
  border-bottom: 1px dashed rgba(28,43,39,0.16); padding-bottom: 24px; margin-bottom: 10px;
}
.sci-local-toolbar .result-count{
  font-family: var(--font-mono); font-size: 12.5px; color: var(--slate);
}
.sci-local-toolbar .result-count strong{ color: var(--sci-ink); }

@media (max-width: 980px){
  .sci-cat-hero{ grid-template-columns: 1fr; gap: 30px; }
  .sci-cat-hero-visual{ max-width: 320px; margin: 0 auto; }
}
@media (max-width: 640px){
  .sci-breadcrumb{ padding-top: 90px; }
  .sci-sibling-nav{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:14px; }
}

/* =========================================================
   HUB PAGE — category picker grid
   ========================================================= */
.sci-hub{ max-width: var(--container); margin: 0 auto; padding: 70px var(--pad) 90px; }
.sci-hub-head{ max-width: 620px; margin: 0 0 46px; }
.sci-hub-title{
  font-family: var(--font-display); font-weight:600; font-size: clamp(28px, 3.4vw, 42px);
  color: var(--sci-ink); margin: 14px 0 12px;
}
.sci-hub-title em{ font-style: italic; color: var(--sci-coral); }
.sci-hub-sub{ font-size: 15px; color: var(--ink-soft); margin:0; }

.sci-hub-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.sci-hub-card{
  position: relative; background: var(--white); border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(28,43,39,0.08); display:flex; flex-direction:column;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
  isolation: isolate;
}
.sci-hub-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 44px rgba(28,43,39,0.14); }
.sci-hub-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background: var(--hub-dot, var(--sci-teal)); z-index:2;
}
.sci-hub-card-media{
  aspect-ratio: 4/3; background: var(--sci-paper); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sci-hub-card-media img{
  width: 70%; height:70%; object-fit:contain; transition: transform .5s var(--ease-out);
}
.sci-hub-card:hover .sci-hub-card-media img{ transform: scale(1.08) rotate(-1deg); }
.sci-hub-card-body{ padding: 22px 24px 26px; flex:1; display:flex; flex-direction:column; }
.sci-hub-card-num{
  font-family: var(--font-mono); font-size: 12px; color: var(--hub-dot, var(--sci-teal)); margin-bottom: 8px; display:block;
}
.sci-hub-card-body h3{
  font-family: var(--font-display); font-weight:600; font-size: 21px; color: var(--sci-ink); margin: 0 0 8px;
}
.sci-hub-card-body p{ font-size: 13.5px; color: var(--ink-soft); line-height:1.55; margin: 0 0 18px; flex:1; }
.sci-hub-card-link{
  font-size: 13px; font-weight:700; color: var(--sci-ink);
  display:inline-flex; align-items:center; gap:6px; border-bottom: 1.5px solid var(--sci-ink); padding-bottom:2px; width:fit-content;
}
.sci-hub-card-link .arrow{ transition: transform .3s var(--ease-out); }
.sci-hub-card:hover .sci-hub-card-link{ color: var(--hub-dot, var(--sci-coral)); border-color: var(--hub-dot, var(--sci-coral)); }
.sci-hub-card:hover .sci-hub-card-link .arrow{ transform: translateX(4px); }

@media (max-width: 1100px){
  .sci-hub-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .sci-hub-grid{ grid-template-columns: 1fr; }
}

.sci-hub-card-media{ transform-style: preserve-3d; }