/* =========================================================
   CATALOGUE PRODUITS — page rayons + cartes + fiche
   ========================================================= */

/* ---- cartes catégories sur l'accueil ---- */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:2.6rem; }
.cat-card{
  position:relative; overflow:hidden; border-radius:8px;
  border:1px solid var(--line); background:linear-gradient(160deg,var(--surface),var(--bg-deep));
  min-height:230px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.8rem; transition:border-color .3s, transform .3s;
}
.cat-card:hover{ border-color:var(--red); transform:translateY(-4px); }
.cat-card .ic{ width:44px; height:44px; color:var(--red); margin-bottom:auto; }
.cat-card h3{ font-size:1.4rem; margin-bottom:.4rem; }
.cat-card p{ color:var(--ink-mute); font-size:.88rem; }
.cat-card .go{ display:inline-flex; align-items:center; gap:.4em; margin-top:1rem; font-family:var(--display); font-size:.82rem; color:var(--red-bright); }
.cat-card .go svg{ width:1em; height:1em; transition:transform .2s; }
.cat-card:hover .go svg{ transform:translateX(3px); }

/* ---- page catalogue ---- */
.catalog{ padding-block:clamp(40px,6vw,72px); }
.catalog-hero{ text-align:center; max-width:52ch; margin:0 auto clamp(32px,5vw,56px); }
.catalog-hero h1{ font-size:clamp(2.2rem,5vw,3.4rem); margin:1rem 0; }
.catalog-hero p{ color:var(--ink-soft); }

.rayon{ margin-bottom:clamp(40px,6vw,72px); scroll-margin-top:90px; }
.rayon-head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.6rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.rayon-head .ic{ width:34px; height:34px; color:var(--red); flex-shrink:0; }
.rayon-head h2{ font-size:clamp(1.5rem,3vw,2rem); }
.rayon-head .count{ margin-left:auto; font-size:.82rem; color:var(--ink-faint); font-family:var(--display); }

.prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.prod-card{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  overflow:hidden; display:flex; flex-direction:column; text-align:left;
  transition:border-color .3s, transform .3s;
}
.prod-card:hover{ border-color:var(--red); transform:translateY(-4px); }
.prod-media{ aspect-ratio:1/1; background:#fff; display:grid; place-items:center; overflow:hidden; }
.prod-media img{ width:100%; height:100%; object-fit:contain; padding:.5rem; }
.prod-body{ padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.prod-marque{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.prod-nom{ font-family:var(--display); font-weight:600; font-size:1.05rem; line-height:1.2; margin:.4rem 0 .7rem; }
.prod-tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:1rem; }
.prod-tags span{ font-size:.68rem; color:var(--ink-soft); border:1px solid var(--line); border-radius:20px; padding:.2em .6em; background:var(--bg); }
.prod-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.prod-price{ font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--ink-mute); }
.prod-cta{ display:inline-flex; align-items:center; gap:.35em; font-family:var(--display); font-size:.82rem; color:var(--red-bright); }
.prod-cta svg{ width:1em; height:1em; transition:transform .2s; }
.prod-card:hover .prod-cta svg{ transform:translateX(3px); }

@media (max-width:900px){
  .cat-grid{ grid-template-columns:1fr; }
  .prod-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .prod-grid{ grid-template-columns:1fr; }
}

/* prix affiché sur les cartes */
.prod-price.has-prix{ color:var(--ink); font-weight:700; font-size:1.05rem; }

/* mention livraison sur les cartes */
.prod-livraison{
  display:flex; align-items:center; gap:.4em; margin:.8rem 0 0;
  font-size:.72rem; color:var(--ink-mute);
  padding-top:.7rem; border-top:1px solid var(--line);
}
.prod-livraison svg{ width:13px; height:13px; flex-shrink:0; color:var(--brass); }

/* ---- bande occasion sur demande ---- */
.occasion-band{ background:linear-gradient(150deg, var(--surface), var(--bg-deep)); border-top:1px solid var(--line); padding-block:clamp(48px,7vw,88px); }
.occasion-inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(32px,5vw,64px); align-items:center; }
.occasion-copy h2{ font-size:clamp(1.8rem,3.5vw,2.6rem); margin:.9rem 0 1.2rem; }
.occasion-copy p{ color:var(--ink-soft); margin-bottom:1rem; }
.occasion-copy .occasion-hl{ color:var(--ink); font-weight:500; }
.occasion-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.6rem; }
.occasion-features{ display:flex; flex-direction:column; gap:1.2rem; }
.occ-feat{ display:flex; gap:.9rem; align-items:flex-start; padding:1.1rem 1.3rem; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); }
.occ-feat svg{ width:24px; height:24px; color:var(--red); flex-shrink:0; margin-top:.1rem; }
.occ-feat b{ font-family:var(--display); display:block; font-size:.98rem; margin-bottom:.2rem; }
.occ-feat span{ color:var(--ink-mute); font-size:.84rem; }
@media (max-width:860px){ .occasion-inner{ grid-template-columns:1fr; } }