/* FOOT FACTORY — NOS SERVICES */
.page-hero--short { min-height: clamp(24rem, 18rem + 16vw, 34rem); }

.svc {
  display: flex; flex-direction: column; gap: var(--s4);
  padding: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-raised);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.svc:hover { border-color: var(--ff-bone-28); background: var(--bg-card); transform: translateY(-3px); }
.svc__title { font-size: var(--fs-h3); text-transform: uppercase; }
.svc__text { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-loose); }
.svc .btn { align-self: flex-start; margin-block-start: auto; }
.svc .list-check { margin-block-end: var(--s2); }

/* ------------------------------------------------------- VOUS ÊTES UN */
.who__title { margin-block-end: var(--s5); }
.who {
  display: grid; gap: clamp(.75rem, 1.4vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.who__tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--ff-ink);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.who__tile:hover { border-color: var(--ff-bone-45); transform: translateY(-3px); }
.who__media { display: block; aspect-ratio: 5 / 4; overflow: hidden; }
.who__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.who__tile:hover .who__media img { transform: scale(1.05); }
.who__count {
  padding: var(--s4) clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-block-start: 1px solid var(--line-soft);
  font-size: var(--fs-xs); color: var(--text-3); letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.who__arrow {
  position: absolute; inset-block-end: .6rem; inset-inline-end: clamp(1rem, .8rem + 1vw, 1.5rem);
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--line); border-radius: 50%;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.who__arrow svg { width: 1rem; height: 1rem; }
.who__tile:hover .who__arrow { border-color: var(--ff-bone-45); transform: translateY(3px); }

/* ------------------------------------------------------ PRODUITS */
.svc-cat { scroll-margin-top: 5rem; }
.svc-cat .sec-head { max-width: none; }
.prod-group + .prod-group { margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem); }
.prod-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s5);
  padding-block-end: var(--s4); margin-block-end: clamp(1rem, 1.4vw, 1.5rem);
  border-block-end: 1px solid var(--line);
}
.prod-group__title { font-size: var(--fs-h4); text-transform: uppercase; }
.prod-group__sub { font-size: var(--fs-sm); color: var(--text-3); }

.prod-grid { display: grid; gap: clamp(.75rem, 1.4vw, 1.25rem); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.prod-grid--1 { --cols: 1; }
.prod-grid--2 { --cols: 2; }
.prod-grid--3 { --cols: 3; }
.prod-grid--4 { --cols: 4; }
@media (max-width: 64rem) { .prod-grid--4 { --cols: 2; } }
@media (max-width: 52rem) { .prod-grid--3 { --cols: 2; } }
@media (max-width: 40rem) { .prod-grid { --cols: 1; } }

.prod {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-raised);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.prod:hover { border-color: var(--ff-bone-28); background: var(--bg-card); transform: translateY(-3px); }
.prod--featured { border-color: var(--ff-bone-28); background: linear-gradient(160deg, rgba(244,243,239,.06), transparent 55%), var(--bg-raised); }

/* Visuel : fond identique à celui des visuels, pour qu'ils se fondent dans la carte */
.prod__media {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: var(--ff-ink);
  border-block-end: 1px solid var(--line-soft);
}
.prod__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.prod:hover .prod__media img { transform: scale(1.04); }
.prod__media::after {
  content: ""; position: absolute; inset: auto 0 0; height: 18%;
  background: linear-gradient(to top, var(--ff-ink), transparent);
  pointer-events: none;
}
/* En attendant un visuel : pictogramme sur le même fond */
.prod__media--empty {
  display: grid; place-items: center; color: var(--ff-bone-45);
  background: radial-gradient(circle at 50% 45%, var(--ff-ink-700), var(--ff-ink) 62%);
}
.prod__media--empty svg { width: 22%; height: auto; transition: transform var(--t-slow) var(--ease), color var(--t) var(--ease); }
.prod:hover .prod__media--empty svg { transform: scale(1.08); color: var(--ff-bone-60); }

.prod__body {
  flex: 1; display: flex; flex-direction: column; gap: var(--s3);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}
.prod__tag {
  align-self: flex-start;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  background: var(--ff-bone); color: var(--ff-ink);
  font-size: .7rem; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.prod__title { font-size: var(--fs-h4); text-transform: uppercase; line-height: 1.1; }
.prod__text { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-loose); }
.prod__opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.prod__opts li {
  padding: .28rem .65rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ff-bone-60);
}
.prod .btn { align-self: flex-start; margin-block-start: auto; }

/* Produit phare : visuel à gauche, explication à droite */
.prod--wide { grid-column: 1 / -1; }
@media (min-width: 52rem) {
  .prod--wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .prod--wide .prod__media { border-block-end: 0; border-inline-end: 1px solid var(--line-soft); }
  .prod--wide .prod__media::after { display: none; }
  .prod--wide .prod__body { justify-content: center; gap: var(--s4); padding: clamp(2rem, 1rem + 3vw, 4rem); }
  .prod--wide .prod__title { font-size: var(--fs-h3); }
  .prod--wide .prod__text { font-size: var(--fs-body); max-width: 52ch; }
  .prod--wide .btn { margin-block-start: var(--s3); }
}