/* ---------- catalogue : trois volets, pavés cliquables ---------- */
.ctg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.cx{background:#fff;border:1px solid var(--line);display:grid;
  grid-template-rows:auto 1fr;min-width:0}
.cx--w{grid-column:1/-1;grid-template-columns:minmax(0,40%) minmax(0,1fr);
  grid-template-rows:auto}
.cx__ph{position:relative;overflow:hidden;background:var(--steel2)}
.cx__ph picture{display:contents}
.cx__ph img{width:100%;height:100%;object-fit:cover;display:block}
.cx__ph--b{aspect-ratio:16/7}
.cx--w .cx__ph{min-height:320px}
/* le volet conditionnement n'a pas de photo : trame de camouflage sur fond navy */
.cx__ph--t{aspect-ratio:16/7;background:var(--navy);display:grid;place-items:center;
  position:relative}
.cx__ph--t::before{content:"";position:absolute;inset:0;opacity:.17;
  background-image:url("../../../images/site/trame-camouflage-2-kYiVNm2.svg");
  background-size:1500px 620px;background-position:38% 42%;
  -webkit-mask-image:linear-gradient(115deg,#000 0%,rgba(0,0,0,.5) 58%,transparent 92%);
  mask-image:linear-gradient(115deg,#000 0%,rgba(0,0,0,.5) 58%,transparent 92%)}
.cx__i{position:relative;color:#fff;font-size:1.9rem;width:70px;height:70px;
  display:grid;place-items:center;box-shadow:inset 0 0 0 2px rgba(255,255,255,.34)}
.cx__b{padding:clamp(22px,2.6vw,34px);display:grid;gap:14px;align-content:start}
.cx__k{font-family:var(--ui);font-weight:800;font-size:.78rem;letter-spacing:.2em;
  color:var(--blue)}
.cx__b h3{font-size:clamp(1.25rem,1.9vw,1.62rem);line-height:1.14;letter-spacing:-.02em}
.cx__b>p{font-size:.92rem;color:var(--mute);max-width:48ch}

/* pavés : deux lignes, cible large, aucun chevron */
.pav{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px;
  margin-top:4px}
.pav a{display:grid;gap:3px;padding:13px 15px;background:var(--wash);
  box-shadow:inset 0 0 0 1px var(--line-s);transition:background .16s,box-shadow .16s}
.pav a:hover,.pav a:focus-visible{background:#fff;text-decoration:none;
  box-shadow:inset 0 0 0 2px var(--blue)}
.pav b{font-family:var(--ui);font-weight:700;font-size:.9rem;color:var(--navy);
  line-height:1.25}
.pav span{font-size:.76rem;color:var(--mute);font-variant-numeric:tabular-nums}

/* chips : une ligne, pour les équipements */
.chp{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chp a{font-family:var(--ui);font-weight:600;font-size:.8rem;color:var(--body);
  padding:8px 13px;background:var(--wash);box-shadow:inset 0 0 0 1px var(--line-s);
  transition:background .16s,box-shadow .16s,color .16s}
.chp a:hover,.chp a:focus-visible{background:#fff;color:var(--blue-d);
  text-decoration:none;box-shadow:inset 0 0 0 2px var(--blue)}

@media (max-width:980px){
  .ctg{grid-template-columns:minmax(0,1fr);gap:20px}
  .cx--w{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .cx--w .cx__ph{min-height:0;aspect-ratio:16/7}
}