/* Le Shop : éléments partagés (chargés partout : pastille, tiroir du brief, rangées d'entrée).
   Mise en page des pages du Shop : pages/styles/shop-pages.css. Pas de jaune, pas de prix. */
:root {
  /* DA technique (12/11/2026, TE / Nothing / Ssense) : neutres, filets, deux voix typographiques.
     La couleur de famille ne survit qu'en repère (--shop-dot). Interactif = encre, jamais de jaune. */
  --shop-stage-bg: #e6e5e0;
  --shop-stage-bg-hover: #dcdbd5;
  --shop-stage-dots: color-mix(in srgb, var(--color-text) 9%, transparent);
  --shop-rule: var(--rule-width) solid color-mix(in srgb, var(--color-text) 18%, transparent);
  --shop-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --shop-mono-size: 0.6875rem;
  --shop-mono-track: 0.06em;
  --shop-dot: 0.5rem;
  --shop-name-size: 0.9375rem;
  --shop-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
  /* Colonnes : 4 cartes à 1440, 3 de 992 à 1279, 4 sur tablette, 2 en mobile ; cartes jointives. */
  --shop-card-span: 3;
  --shop-wide-span: 6;
  /* Couleurs des familles : boîte (fond) et texte de la boîte. Contrastes ≥ 4,5:1. */
  --shop-strategie: #25335c;
  --shop-strategie-ink: #fff;
  --shop-identite: #d9b8e3;
  --shop-identite-ink: #111;
  --shop-campagnes: #c4432a;
  --shop-campagnes-ink: #fff;
  --shop-digital: #2f6b55;
  --shop-digital-ink: #fff;
  --shop-bundle: #111;
  --shop-bundle-ink: #f2f1ed;
  --shop-shot-ratio: 4 / 5;
  --shop-box-width: 52%;
  /* Boîte en volume : angle de vue par défaut, profondeur. */
  --shop-rx: -15deg;
  --shop-ry: -30deg;
  --shop-depth: 22cqw;
  --shop-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shop-drawer-width: 28rem;
  --shop-shadow-panel: 0 0 var(--size-48) color-mix(in srgb, var(--ink-900) 22%, transparent);
}
@media screen and (min-width: 62em) and (max-width: 79.9375em) {
  :root { --shop-card-span: 4; --shop-wide-span: 8; }
}
@media screen and (max-width: 61.9375em) {
  :root { --shop-card-span: 2; --shop-wide-span: 4; }
}
@media screen and (max-width: 47.9375em) {
  :root { --shop-card-span: 4; --shop-wide-span: 8; }
}
@media screen and (max-width: 29.9375em) {
  :root { --shop-card-span: 2; --shop-wide-span: 4; --shop-box-width: 56%; }
}

/* Cadre : grille officielle 12 / 8 / 4 (marges alignées sur le logo). */
.shop-frame {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-margin);
}
:where(.shop-frame) > * {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Couleur d'une famille sur un élément (boîte, mini boîte). */
[data-family="strategie"] { --shop-c: var(--shop-strategie); --shop-ci: var(--shop-strategie-ink); }
[data-family="identite"] { --shop-c: var(--shop-identite); --shop-ci: var(--shop-identite-ink); }
[data-family="campagnes"] { --shop-c: var(--shop-campagnes); --shop-ci: var(--shop-campagnes-ink); }
[data-family="digital"] { --shop-c: var(--shop-digital); --shop-ci: var(--shop-digital-ink); }
[data-family="bundle"] { --shop-c: var(--shop-bundle); --shop-ci: var(--shop-bundle-ink); }

/* Vitrine */
.shop-shot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--shop-shot-ratio);
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, var(--color-surface) 55%, color-mix(in srgb, var(--color-surface) 92%, var(--ink-900)));
  perspective: 1200px;
  isolation: isolate;
}

/* Boîte en volume : face, tranche droite, dessus, ombre au sol. */
.shop-box {
  --rx: var(--shop-rx);
  --ry: var(--shop-ry);
  --rz: 0deg;
  position: relative;
  display: block;
  container-type: inline-size;
  width: var(--shop-box-width);
  aspect-ratio: 3 / 4;
  transform-style: preserve-3d;
  transform: translateY(2%) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
  transition: transform 520ms var(--shop-ease);
}
.shop-box::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -22%;
  bottom: -9%;
  height: 16%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ink-900) 38%, transparent), transparent);
  transform: translateZ(calc(var(--shop-depth) * -0.5)) rotateX(80deg);
  pointer-events: none;
}
.shop-box-face,
.shop-box-side,
.shop-box-top {
  position: absolute;
  background-color: var(--shop-c, var(--shop-bundle));
  backface-visibility: hidden;
}
.shop-box-face {
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10% 11%;
  color: var(--shop-ci, var(--shop-bundle-ink));
  background-image: linear-gradient(105deg, rgb(255 255 255 / 0.1), transparent 38%, rgb(0 0 0 / 0.06));
  transform: translateZ(calc(var(--shop-depth) / 2));
}
.shop-box-side {
  top: 0;
  left: calc(50% - var(--shop-depth) / 2);
  width: var(--shop-depth);
  height: 100%;
  filter: brightness(0.7);
  transform: rotateY(90deg) translateZ(50cqw);
}
.shop-box-top {
  top: calc(50% - var(--shop-depth) / 2);
  left: 0;
  width: 100%;
  height: var(--shop-depth);
  filter: brightness(1.14);
  transform: rotateX(90deg) translateZ(66.667cqw);
}
.shop-box-brand {
  font-family: var(--font-heading);
  font-size: 9cqw;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.shop-box-name {
  font-family: var(--font-heading);
  font-size: 11cqw;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
}
.shop-box-name.is-long { font-size: 8.8cqw; }
.shop-box-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--size-4);
  font-family: var(--font-body);
  font-size: 5.6cqw;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Bundle : boîtes empilées (2 sur les cartes, jusqu'à 4 sur la fiche). */
.shop-shot.is-bundle .shop-box { position: absolute; width: calc(var(--shop-box-width) * 0.78); }
.shop-shot.is-set-2 .shop-box.is-b1 { left: 14%; top: 22%; }
.shop-shot.is-set-2 .shop-box.is-b2 { left: 44%; top: 30%; --rz: 5deg; }
.shop-shot.is-set-3 .shop-box { width: calc(var(--shop-box-width) * 0.66); }
.shop-shot.is-set-3 .shop-box.is-b1 { left: 10%; top: 20%; }
.shop-shot.is-set-3 .shop-box.is-b2 { left: 34%; top: 28%; --rz: 2deg; }
.shop-shot.is-set-3 .shop-box.is-b3 { left: 58%; top: 36%; --rz: 4deg; }
.shop-shot.is-set-4 .shop-box { width: calc(var(--shop-box-width) * 0.5); }
.shop-shot.is-set-4 .shop-box.is-b1 { left: 8%; top: 20%; }
.shop-shot.is-set-4 .shop-box.is-b2 { left: 28%; top: 26%; --rz: 1deg; }
.shop-shot.is-set-4 .shop-box.is-b3 { left: 48%; top: 32%; --rz: 2deg; }
.shop-shot.is-set-4 .shop-box.is-b4 { left: 66%; top: 38%; --rz: 3deg; }

.shop-badge {
  position: absolute;
  top: var(--size-12);
  left: var(--size-12);
  z-index: 2;
  padding: var(--size-4) var(--size-8);
  background: var(--color-text);
  color: var(--color-background);
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-ui);
  text-transform: uppercase;
}

/* Grille de cartes et tuiles */
.shop-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--size-48) var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.shop-card-item {
  position: relative;
  grid-column: span var(--shop-card-span);
  display: flex;
  min-width: 0;
}
.shop-card-item.is-wide { grid-column: span var(--shop-wide-span); }
.shop-card-item.is-wide .shop-shot { aspect-ratio: 8 / 5; --shop-box-width: 30%; }
.shop-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--size-12);
  color: inherit;
  text-decoration: none;
}
.shop-card-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
}
.shop-card-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--type-subtitle);
  font-weight: var(--weight-medium);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
}
.shop-card-tag {
  color: var(--color-muted);
  font-size: var(--type-small);
  line-height: 1.45;
  text-wrap: pretty;
}
/* « Sur devis » aligné en bas de toutes les cartes d'une rangée. */
.shop-card-row {
  display: flex;
  justify-content: space-between;
  gap: var(--size-8);
  margin-top: auto;
  padding-top: var(--size-8);
  font-size: var(--type-small);
  line-height: var(--leading-ui);
  font-variant-numeric: tabular-nums;
}
.shop-card-row span { color: var(--color-muted); }
.shop-card-row b { font-weight: var(--weight-strong); white-space: nowrap; }
.shop-card:focus-visible { outline: var(--focus-ring); outline-offset: var(--size-4); }
@media (hover: hover) {
  .shop-card:hover .shop-box:not(.is-b2, .is-b3, .is-b4) { --ry: -40deg; --rx: -18deg; }
  .shop-card:hover .shop-box.is-b2 { --rz: 9deg; }
  .shop-card:hover .shop-card-title {
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
  }
}

/* Ajout rapide « + » */
.shop-quick {
  position: absolute;
  top: var(--size-12);
  right: var(--size-12);
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--size-36);
  height: var(--size-36);
  border: var(--rule-strong);
  background: var(--color-background);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--motion-quick), color var(--motion-quick), transform var(--motion-quick);
}
.shop-quick-icon,
.shop-quick-icon::before {
  display: block;
  width: 14px;
  height: 2px;
  background: currentColor;
}
.shop-quick-icon { position: relative; transition: transform var(--motion-swap); }
.shop-quick-icon::before { content: ""; position: absolute; inset: 0; transform: rotate(90deg); }
.shop-quick:hover { background: var(--color-text); color: var(--color-background); }
.shop-quick:active { transform: scale(0.94); }
.shop-quick[aria-pressed="true"] { background: var(--color-text); color: var(--color-background); }
.shop-quick[aria-pressed="true"] .shop-quick-icon { transform: rotate(45deg) scale(0.9); }
.shop-quick:focus-visible { outline: var(--focus-ring); outline-offset: var(--size-4); }
.shop-with-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--size-16); }
.shop-with-list .shop-quick,
.shop-lines .shop-quick { position: static; flex: none; }

@media screen and (max-width: 29.9375em) {
  .shop-grid { row-gap: var(--size-36); }
  .shop-card-title { font-size: var(--type-body); }
  .shop-card-tag { font-size: 0.8125rem; }
  .shop-card-row { flex-direction: column; gap: var(--size-4); }
  .shop-badge { top: var(--size-8); left: var(--size-8); font-size: 0.625rem; }
  .shop-quick { top: var(--size-4); right: var(--size-4); width: 2.75rem; height: 2.75rem; }
}

/* Tuiles éditoriales (catalogue) */
.shop-tile {
  grid-column: span var(--shop-wide-span);
  min-width: 0;
  display: flex;
}
.shop-tile-link {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
}
.shop-tile-image { display: block; min-height: 100%; overflow: hidden; }
.shop-tile-image img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: transform var(--motion-swap);
}
.shop-tile-text {
  display: flex;
  flex-direction: column;
  gap: var(--size-16);
  padding: var(--size-24);
}
.shop-tile-kicker {
  color: var(--color-muted);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-caps);
  line-height: 1.4;
  text-transform: uppercase;
}
.shop-tile-quote {
  font-family: var(--font-heading);
  font-size: var(--type-subtitle);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
}
.shop-tile-go {
  margin-top: auto;
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
@media (hover: hover) {
  .shop-tile-link:hover .shop-tile-image img { transform: scale(1.03); }
}
.shop-tile-link:focus-visible { outline: var(--focus-ring); outline-offset: var(--size-4); }
.shop-tile-call {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-16);
  padding: var(--size-24);
  background: var(--color-text);
  color: var(--color-background);
}
.shop-tile-call-title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-heading);
  font-size: var(--type-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
}
.shop-tile-call-text {
  max-width: 40ch;
  margin: 0;
  color: color-mix(in srgb, var(--color-background) 80%, transparent);
  font-size: var(--type-body);
  line-height: var(--leading-lead);
  text-wrap: pretty;
}
.shop-tile-call .yam-faces { margin-top: auto; }
@media screen and (max-width: 29.9375em) {
  .shop-tile-link { grid-template-columns: minmax(0, 1fr); }
  .shop-tile-image { aspect-ratio: 4 / 3; }
}

/* Boutons */
.shop-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-8);
  min-height: var(--size-48);
  padding: var(--size-12) var(--size-24);
  border: var(--rule-strong);
  background: var(--color-text);
  color: var(--color-background);
  font-family: var(--font-heading);
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-ui);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-quick), color var(--motion-quick), transform var(--motion-quick);
}
.shop-add:active { transform: scale(0.98); }
.shop-add.is-block { width: 100%; }
.shop-add.is-invert { border-color: var(--color-background); background: var(--color-background); color: var(--color-text); }
.shop-add.is-invert:hover { background: transparent; color: var(--color-background); }
.shop-add-on { display: none; }
.shop-add[aria-pressed="true"] { background: transparent; color: var(--color-text); }
.shop-add[aria-pressed="true"] .shop-add-off { display: none; }
.shop-add[aria-pressed="true"] .shop-add-on { display: inline; }
.shop-add[aria-pressed="true"] .shop-add-on::before {
  content: "";
  display: inline-block;
  width: 0.35em;
  height: 0.7em;
  margin-right: 0.55em;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-0.1em) rotate(45deg);
}
.shop-add:not(.is-invert):hover { background: var(--color-background); color: var(--color-text); }
.shop-add[aria-pressed="true"]:hover { background: var(--color-text); color: var(--color-background); }
.shop-add:focus-visible { outline: var(--focus-ring); outline-offset: var(--size-4); }
.shop-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  cursor: pointer;
}

/* Mini boîte et lien compact vers une fiche */
.shop-mini {
  flex: none;
  display: inline-block;
  width: var(--size-18);
  height: var(--size-24);
  background: var(--shop-c, var(--shop-bundle));
  box-shadow: 3px -2px 0 color-mix(in srgb, var(--shop-c, var(--shop-bundle)) 70%, #000);
}
.shop-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--size-12);
  color: inherit;
  font-family: var(--font-heading);
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-ui);
  text-decoration: none;
}
.shop-chip:hover span:last-child { text-decoration: underline; text-underline-offset: 0.15em; }

/* Rangée d'entrée (pages métiers, accueil) */
.shop-row {
  row-gap: var(--size-36);
  padding-block: var(--size-96);
}
.shop-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--size-12) var(--size-24);
  padding-top: var(--size-16);
  border-top: var(--rule-strong);
}
.shop-row-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--type-title);
  font-weight: var(--weight-regular);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
}
.shop-row-text {
  flex: 1 1 22rem;
  max-width: var(--measure-lead);
  margin: 0;
  color: var(--color-muted);
  font-size: var(--type-body);
  line-height: var(--leading-lead);
  text-wrap: pretty;
}
.shop-row-all {
  display: inline-flex;
  align-items: center;
  gap: var(--size-8);
  color: inherit;
  font-family: var(--font-heading);
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}
.shop-row-all img { width: 1em; height: auto; margin: 0; }
@media screen and (max-width: 61.9375em) {
  .shop-row { padding-block: var(--size-64); }
}

/* Pastille « Mon brief (n) » */
.shop-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--size-8);
  margin-left: var(--size-20);
  padding: var(--size-8) var(--size-12);
  border: var(--rule-strong);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--size-14);
  font-weight: var(--weight-medium);
  line-height: var(--leading-ui);
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}
.shop-pill[hidden] { display: none; }
.shop-pill:hover { background: var(--color-text); color: var(--color-background); }
.shop-pill:hover .shop-pill-n { background: var(--color-background); color: var(--color-text); }
.shop-pill-n {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.35em;
  background: var(--color-text);
  color: var(--color-background);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
}
.shop-pill.is-bar { display: none; }
@media screen and (max-width: 61.9375em) {
  .site-nav-links .shop-pill { display: none; }
  .shop-pill.is-bar:not([hidden]) { display: inline-flex; margin-left: auto; margin-right: var(--size-16); }
}
.shop-pill.is-bumped { animation: shop-bump 520ms var(--shop-ease); }
@keyframes shop-bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.14); }
  55% { transform: scale(0.96); }
  100% { transform: scale(1); }
}
/* Boîte qui tombe dans la pastille (élément créé par shop.js). */
.shop-fly {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: var(--size-24);
  height: var(--size-36);
  background: var(--shop-c, var(--shop-bundle));
  box-shadow: 4px -3px 0 color-mix(in srgb, var(--shop-c, var(--shop-bundle)) 70%, #000);
  pointer-events: none;
}

/* Tiroir du brief */
.shop-drawer {
  position: fixed;
  inset: 0;
  z-index: 1500;
}
.shop-drawer[hidden] { display: none; }
.shop-drawer-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink-900) 40%, transparent);
  opacity: 0;
  transition: opacity 320ms ease;
}
.shop-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(var(--shop-drawer-width), 100%);
  background: var(--color-background);
  color: var(--color-text);
  box-shadow: var(--shop-shadow-panel);
  transform: translateX(100%);
  transition: transform 420ms var(--shop-ease);
  outline: none;
}
.shop-drawer.is-open .shop-drawer-scrim { opacity: 1; }
.shop-drawer.is-open .shop-drawer-panel { transform: none; }
.shop-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-16);
  padding: var(--size-16) var(--size-24);
  padding-top: max(var(--size-16), env(safe-area-inset-top));
  border-bottom: var(--rule-strong);
}
.shop-drawer-title {
  display: flex;
  align-items: center;
  gap: var(--size-8);
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--type-subtitle);
  font-weight: var(--weight-regular);
  line-height: var(--leading-title);
}
.shop-drawer-close {
  position: relative;
  width: var(--size-48);
  height: var(--size-48);
  margin-right: calc(var(--size-12) * -1);
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.shop-drawer-close span::before,
.shop-drawer-close span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.shop-drawer-close span::after { transform: translate(-50%, -50%) rotate(-45deg); }
.shop-drawer-close:focus-visible { outline: var(--focus-ring); outline-offset: calc(var(--size-4) * -1); }
.shop-drawer-added {
  margin: 0;
  padding: 0 var(--size-24);
  font-size: var(--type-small);
  color: var(--color-muted);
}
.shop-drawer-added:not(:empty) { padding-block: var(--size-12); border-bottom: var(--rule-subtle); }
.shop-drawer-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--size-24) var(--size-24);
}
.shop-drawer-empty { padding-block: var(--size-24); }
.shop-drawer-empty p { margin: 0 0 var(--size-16); font-size: var(--type-body); line-height: var(--leading-lead); }
.shop-drawer-empty[hidden] { display: none; }
.shop-drawer-sub {
  margin: var(--size-24) 0 0;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.shop-drawer-with[hidden] { display: none; }
.shop-drawer-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-12);
  padding: var(--size-16) var(--size-24);
  padding-bottom: max(var(--size-16), env(safe-area-inset-bottom));
  border-top: var(--rule-strong);
}
.shop-drawer-foot .shop-sum { width: 100%; margin: 0; padding: 0; }
@media screen and (max-width: 29.9375em) {
  .shop-drawer-panel { width: 100%; }
}

/* Lignes du brief (tiroir et page « Mon brief ») */
.shop-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}
.shop-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--size-16);
  padding-block: var(--size-16);
  border-bottom: var(--rule-subtle);
}
.shop-line .shop-mini { width: var(--size-24); height: var(--size-36); }
.shop-line-text { display: flex; flex-direction: column; gap: var(--size-4); min-width: 0; }
.shop-line-name {
  color: inherit;
  font-family: var(--font-heading);
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-title);
  text-decoration: none;
}
.shop-line-name:hover { text-decoration: underline; }
.shop-line-meta { color: var(--color-muted); font-size: var(--type-small); font-variant-numeric: tabular-nums; }
.shop-line-remove {
  padding: var(--size-8);
  border: 0;
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--type-small);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.shop-line-remove:hover { color: var(--color-text); }
.shop-line.is-new { animation: shop-line-in 420ms var(--shop-ease); }
@keyframes shop-line-in {
  from { opacity: 0; transform: translateY(-6px); }
}
.shop-sum {
  display: flex;
  justify-content: space-between;
  gap: var(--size-16);
  font-size: var(--type-body);
}
.shop-sum b { font-family: var(--font-heading); font-weight: var(--weight-strong); }
html.shop-lock { overflow: hidden; }

/* Guide : encart de fin « Le produit qui va avec » */
.shop-guide-box-kicker {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-ui);
  text-transform: uppercase;
}
.shop-guide-box-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--size-24);
  align-items: start;
  width: 100%;
}
.shop-guide-box-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-16);
}
.shop-guide-box-text .yam-doors-title a { color: inherit; text-decoration: none; }
.shop-guide-box-text .yam-doors-title a:hover { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.shop-guide-box-meta { margin: 0; color: var(--color-muted); font-size: var(--type-small); }
.shop-guide-box .yam-doors-delay a { color: var(--color-text); }
@media screen and (max-width: 29.9375em) {
  .shop-guide-box-body { grid-template-columns: minmax(0, 1fr); }
  .shop-guide-box-shot { max-width: 60%; }
}

/* Fiche projet : « Ce projet contenait » */
.shop-contained {
  align-items: baseline;
  row-gap: var(--size-16);
  padding-block: var(--size-24);
  margin-block: var(--size-48);
  border-block: var(--rule-subtle);
}
.shop-contained-title {
  grid-column: 1 / span 3;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-ui);
}
.shop-contained-list {
  grid-column: 4 / span 7;
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-12) var(--size-24);
  margin: 0;
  padding: 0;
  list-style: none;
}
.shop-contained-all {
  grid-column: 11 / span 2;
  justify-self: end;
  color: inherit;
  font-size: var(--type-small);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
@media screen and (max-width: 61.9375em) {
  .shop-contained-title,
  .shop-contained-list,
  .shop-contained-all { grid-column: 1 / -1; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-box,
  .shop-add,
  .shop-quick,
  .shop-quick-icon,
  .shop-drawer-scrim,
  .shop-drawer-panel,
  .shop-tile-image img { transition: none; }
  .shop-pill.is-bumped,
  .shop-line.is-new { animation: none; }
}

/* Objet de la fiche (champ « Objet ») : image détourée posée sur la couleur de la famille, cadrage 4/5.
   Il remplace la boîte quand il existe ; sans objet, la boîte reste. */
.shop-object {
  display: block;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  background-color: var(--shop-c);
}
.shop-object img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12%;
  box-sizing: border-box;
  transition: transform var(--motion-swap);
}
.shop-shot.has-object { background: var(--shop-c); perspective: none; }
.shop-shot.has-object > .shop-object { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.shop-shot.is-bundle .shop-object { position: absolute; width: calc(var(--shop-box-width) * 0.78); }
.shop-line .shop-object, .shop-mini .shop-object { padding: 0; }
@media (hover: hover) {
  .shop-card:hover .shop-object img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .shop-object img { transition: none; }
}

/* Pictos (Streamline Ultimate Light) : à la place de la boîte quand la fiche en a un.
   Fond = couleur de la famille, trait = encre contrastée de la famille. Taille tirée de la vignette
   (≈ 40 % de sa largeur, plafonnée par sa hauteur) : identique sur les cartes, la fiche et les rangées. */
.shop-picto {
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  width: 100%;
  background-color: var(--shop-c);
  color: var(--shop-ci);
}
.shop-picto-svg { display: block; flex: none; width: min(40cqw, 32cqh); height: auto; aspect-ratio: 1; overflow: visible; }
/* Bundle : les pictos des produits côte à côte (2 ou 3 en ligne, 4 en carré). */
.shop-picto:not(.is-n1) { gap: min(7cqw, 6cqh); }
.shop-picto.is-n2 .shop-picto-svg { width: min(28cqw, 26cqh); }
.shop-picto.is-n3 .shop-picto-svg { width: min(22cqw, 22cqh); }
.shop-picto.is-n4 { display: grid; grid-template-columns: repeat(2, auto); place-content: center; gap: min(7cqw, 6cqh) min(9cqw, 8cqh); }
.shop-picto.is-n4 .shop-picto-svg { width: min(20cqw, 22cqh); }
.shop-shot.has-picto { background: none; perspective: none; }
.shop-shot.has-picto > .shop-picto { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.shop-picto-svg { transition: transform var(--motion-swap); }
@media (hover: hover) {
  .shop-card:hover .shop-picto-svg,
  .shop-guide-box:hover .shop-picto-svg { transform: translateY(-4%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .shop-picto-svg { transition: none; }
  .shop-card:hover .shop-picto-svg, .shop-guide-box:hover .shop-picto-svg { transform: none; }
}
/* Mini (lignes du panier, puces) : le picto dans la pastille de couleur. */
.shop-mini.has-picto { display: inline-flex; align-items: center; justify-content: center; color: var(--shop-ci, var(--color-text)); box-shadow: none; }
.shop-mini.has-picto .shop-picto-svg { width: 78%; }


/* ==========================================================================
   DA technique (12/11/2026) : fond neutre, filets, monospace pour les données.
   Passe après les règles d'origine ; la boîte 3D reste en repli sans picto.
   ========================================================================== */

/* Repère de famille : un carré plein, seule trace de la couleur. */
.shop-dot {
  display: inline-block;
  flex: none;
  width: var(--shop-dot);
  height: var(--shop-dot);
  margin-right: 0.5em;
  background: var(--shop-c, var(--shop-bundle));
  vertical-align: 0.05em;
}
/* Voix « données » : monospace, petite, chiffres tabulaires, capitales espacées. */
.shop-spec-line,
.shop-card-row b,
.shop-badge,
.shop-line-meta,
.shop-line-remove,
.shop-sum,
.shop-pill,
.shop-drawer-sub,
.shop-tile-kicker {
  font-family: var(--shop-mono);
  font-size: var(--shop-mono-size);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--shop-mono-track);
  line-height: 1.4;
  text-transform: uppercase;
}

/* Vignette : gris neutre, angles droits, rien d'autre. */
.shop-shot,
.shop-shot.has-picto,
.shop-shot.has-object {
  background: var(--shop-stage-bg);
  transition: background-color var(--shop-motion);
}
.shop-picto,
.shop-shot .shop-picto { background: none; color: var(--color-text); }
.shop-picto-svg { width: min(45cqw, 36cqh); transition: transform var(--shop-motion); }
.shop-object { background: none; }

/* Grille en filets : cartes jointives, un filet de 1 px entre chaque. */
.shop-grid,
.shop-grid.is-compact {
  gap: 0;
  border-top: var(--shop-rule);
  border-left: var(--shop-rule);
}
.shop-grid > li { border-right: var(--shop-rule); border-bottom: var(--shop-rule); }
.shop-card { gap: 0; }
.shop-card-meta {
  gap: var(--size-8);
  padding: var(--size-12) var(--size-12) var(--size-16);
}
.shop-card-title {
  font-size: var(--shop-name-size);
  font-weight: var(--weight-medium);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.shop-card-tag { display: none; }
.shop-card-row {
  align-items: baseline;
  margin-top: auto;
  padding-top: 0;
}
.shop-spec-line { display: inline-flex; align-items: baseline; min-width: 0; color: var(--color-muted); }
.shop-card-row b { color: var(--color-text); }
.shop-card-item.is-wide .shop-shot { aspect-ratio: 8 / 5; }
@media (hover: hover) {
  .shop-card:hover .shop-shot { background-color: var(--shop-stage-bg-hover); }
  .shop-card:hover .shop-picto-svg,
  .shop-guide-box:hover .shop-picto-svg { transform: translateY(-3px); }
  .shop-card:hover .shop-card-title { text-decoration: none; }
}

/* Étiquette Best-seller / Nouveau : mono, noir sur blanc. */
.shop-badge {
  top: var(--size-12);
  left: var(--size-12);
  padding: 2px 6px;
  border: var(--rule-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.625rem;
}

/* Ajout rapide : petit carré, au survol sur ordinateur, toujours visible au doigt. */
.shop-quick {
  top: var(--size-8);
  right: var(--size-8);
  width: var(--size-32, 2rem);
  height: var(--size-32, 2rem);
  border: var(--rule-strong);
  background: var(--color-surface);
  transition: opacity var(--shop-motion), background-color var(--shop-motion), color var(--shop-motion);
}
.shop-quick-icon, .shop-quick-icon::before { width: 11px; height: 1px; }
@media (hover: hover) {
  .shop-grid .shop-quick:not([aria-pressed="true"]) { opacity: 0; }
  .shop-card-item:hover .shop-quick,
  .shop-card-item:focus-within .shop-quick { opacity: 1; }
}
@media screen and (max-width: 29.9375em) {
  .shop-quick { top: var(--size-4); right: var(--size-4); width: 2.75rem; height: 2.75rem; }
  .shop-card-row { flex-direction: column; gap: 2px; }
}

/* Tuiles : typo seule sur fond blanc, dans la grille à filets. */
.shop-tile-link,
.shop-tile-call {
  display: flex;
  flex-direction: column;
  gap: var(--size-16);
  padding: var(--size-20) var(--size-16);
  background: var(--color-surface);
  color: var(--color-text);
}
.shop-tile-text { padding: 0; gap: var(--size-16); flex: 1; }
.shop-tile-kicker { color: var(--color-muted); }
.shop-tile-quote,
.shop-tile-call-title {
  max-width: 22ch;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  font-weight: var(--weight-regular);
  line-height: 1.15;
}
.shop-tile-call-text { color: var(--color-muted); font-size: var(--type-small); }
.shop-tile-go { font-family: var(--shop-mono); font-size: var(--shop-mono-size); letter-spacing: var(--shop-mono-track); text-transform: uppercase; }
.shop-tile-call .shop-add { margin-top: auto; }

/* Boutons : rectangles noirs, plats. */
.shop-add {
  min-height: var(--size-48);
  padding: var(--size-12) var(--size-20);
  border: var(--rule-strong);
  font-size: var(--type-small);
  transition: background-color var(--shop-motion), color var(--shop-motion);
}
.shop-add:active { transform: none; }
.shop-add:not(.is-invert):hover { background: #333; border-color: #333; color: var(--color-background); }
.shop-add[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); }
.shop-add[aria-pressed="true"]:hover { background: var(--color-surface); border-color: var(--color-text); color: var(--color-text); }
.shop-add[aria-pressed="true"] .shop-add-on::before { display: none; }
.shop-add[aria-pressed="true"] .shop-add-on::after { content: " \2713"; }

/* Pastille « Mon panier (n) » : mono, compteur en matrice de points. */
.shop-pill {
  gap: var(--size-8);
  padding: 6px var(--size-12);
  border: var(--rule-strong);
  font-size: var(--shop-mono-size);
}
.shop-pill-n,
.shop-drawer-title .shop-pill-n {
  min-width: 1.6em;
  height: 1.6em;
  background: var(--color-text);
  color: var(--color-background);
  font-family: var(--shop-mono);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0;
}
/* Points façon afficheur : une trame noire percée de trous posée sur le chiffre clair (CSS seul, rien à charger). */
.shop-pill-n { position: relative; overflow: hidden; }
.shop-pill-n::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 0.7px, var(--color-text) 0.95px) 0 0 / 2px 2px;
  pointer-events: none;
}
.shop-pill:hover .shop-pill-n::after { background-image: radial-gradient(circle, transparent 0.7px, var(--color-background) 0.95px); }
.shop-pill.is-bumped { animation: shop-flash 360ms steps(2, end); }
@keyframes shop-flash {
  0%, 100% { background: transparent; }
  50% { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
}
.shop-fly { display: none; }

/* Tiroir et lignes du panier : un ticket. */
.shop-drawer-panel { box-shadow: none; border-left: var(--rule-strong); transition: transform 180ms cubic-bezier(0.2, 0, 0, 1); }
.shop-drawer-scrim { transition: opacity 180ms ease-out; background: color-mix(in srgb, var(--ink-900) 24%, transparent); }
.shop-drawer-title { font-size: 1.125rem; font-weight: var(--weight-medium); }
.shop-drawer-head,
.shop-drawer-foot { border-color: var(--color-text); }
.shop-line {
  grid-template-columns: var(--size-40, 2.5rem) minmax(0, 1fr) auto;
  gap: var(--size-12);
  padding-block: var(--size-12);
  border-bottom: var(--shop-rule);
}
.shop-mini,
.shop-line .shop-mini,
.shop-mini.has-picto {
  width: var(--size-40, 2.5rem);
  height: var(--size-40, 2.5rem);
  background: var(--shop-stage-bg);
  color: var(--color-text);
  box-shadow: none;
}
.shop-mini.has-picto .shop-picto-svg { width: 62%; }
.shop-chip .shop-mini { width: var(--size-24); height: var(--size-24); }
.shop-line-name { font-size: var(--shop-name-size); font-weight: var(--weight-medium); }
.shop-line-meta { color: var(--color-muted); }
.shop-line-remove { color: var(--color-muted); text-decoration: none; }
.shop-line-remove:hover { color: var(--color-text); text-decoration: underline; }
.shop-sum { align-items: baseline; color: var(--color-muted); }
.shop-sum b { display: inline-flex; gap: 1.5em; font-family: var(--shop-mono); font-weight: 700; color: var(--color-text); }
.shop-line.is-new { animation: shop-line-in 160ms ease-out; }

/* Rangées d'entrée (accueil, métiers) : même grille à filets, titres plus calmes. */
.shop-row-title { font-size: var(--type-subtitle); }

@media (prefers-reduced-motion: reduce) {
  .shop-shot,
  .shop-picto-svg,
  .shop-quick,
  .shop-drawer-panel,
  .shop-drawer-scrim { transition: none; }
  .shop-card:hover .shop-picto-svg,
  .shop-guide-box:hover .shop-picto-svg { transform: none; }
  .shop-pill.is-bumped { animation: none; }
}
.shop-spec-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media screen and (max-width: 29.9375em) {
  /* Le rayon dit déjà la famille : la carte garde le repère et la durée. */
  .shop-grid .shop-spec-fam { display: none; }
}
.shop-picto-svg { fill: none; }
/* Trait fin et constant (≈ 2 px à l'écran) : épaisseur en unités du picto selon sa taille d'affichage. */
.shop-picto-svg { stroke-width: 0.5; }
.shop-picto:not(.is-n1) .shop-picto-svg { stroke-width: 0.7; }
.shop-pdp .shop-picto-svg { stroke-width: 0.3; }
.shop-pdp .shop-picto:not(.is-n1) .shop-picto-svg { stroke-width: 0.5; }
.shop-mini .shop-picto-svg { stroke-width: 1.1; }

/* ==========================================================================
   Rythme (12/11/2026) : la même carte, plusieurs mises en page selon la liste.
   ========================================================================== */
/* Détails de carte : cachés dans la grille simple, montrés en vedette, index et set. */
.shop-card-more,
.shop-card-add { display: none; }
.shop-k {
  font-family: var(--shop-mono);
  font-size: var(--shop-mono-size);
  letter-spacing: var(--shop-mono-track);
  text-transform: uppercase;
  color: var(--color-muted);
}
.shop-call-link {
  display: inline-flex;
  gap: 0.5em;
  color: var(--color-text);
  font-family: var(--shop-mono);
  font-size: var(--shop-mono-size);
  letter-spacing: var(--shop-mono-track);
  line-height: 1.5;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}
.shop-call-link:hover { text-decoration-thickness: 2px; }

/* Rail : rangée défilante, cartes compactes, au doigt ou aux flèches. */
.shop-rail-frame > .shop-rail-section { grid-column: 1 / -1; }
.shop-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-16);
  margin-bottom: var(--size-12);
}
.shop-rail-title {
  margin: 0;
  font-family: var(--shop-mono);
  font-size: var(--shop-mono-size);
  font-weight: 400;
  letter-spacing: var(--shop-mono-track);
  text-transform: uppercase;
}
.shop-rail-arrows { display: flex; gap: var(--size-4); }
.shop-rail-arrows[hidden] { display: none; }
.shop-rail-btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: var(--rule-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--shop-mono);
  cursor: pointer;
}
.shop-rail-btn:disabled { opacity: 0.3; cursor: default; }
.shop-rail-btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.shop-grid.is-rail {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.shop-grid.is-rail::-webkit-scrollbar { display: none; }
.shop-grid.is-rail > li { flex: 0 0 var(--shop-rail-w, 15rem); scroll-snap-align: start; }
.shop-grid.is-rail .shop-shot { aspect-ratio: 1; }
@media screen and (max-width: 47.9375em) {
  .shop-grid.is-rail > li { --shop-rail-w: 44vw; }
}

/* Index : une ligne par fiche (mini vignette, nom, famille · durée, Idéal si, +). */
:not(.is-filtered) > .shop-grid.is-index > li {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
}
:not(.is-filtered) > .shop-grid.is-index .shop-card {
  flex: 1;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 2fr) minmax(0, 3fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--size-16);
  row-gap: 2px;
  padding: var(--size-8) 0 var(--size-8) var(--size-8);
}
:not(.is-filtered) > .shop-grid.is-index .shop-shot { grid-row: 1 / 3; width: 3.5rem; aspect-ratio: 1; }
:not(.is-filtered) > .shop-grid.is-index .shop-shot .shop-badge { display: none; }
:not(.is-filtered) > .shop-grid.is-index .shop-picto-svg { width: 62%; stroke-width: 1; }
:not(.is-filtered) > .shop-grid.is-index .shop-card-meta,
:not(.is-filtered) > .shop-grid.is-index .shop-card-row { display: contents; }
:not(.is-filtered) > .shop-grid.is-index .shop-card-title { grid-column: 2; grid-row: 1; align-self: end; }
:not(.is-filtered) > .shop-grid.is-index .shop-spec-line { grid-column: 2; grid-row: 2; align-self: start; }
:not(.is-filtered) > .shop-grid.is-index .shop-card-row b { grid-column: 4; grid-row: 1 / 3; }
:not(.is-filtered) > .shop-grid.is-index .shop-card-more {
  grid-column: 3;
  grid-row: 1 / 3;
  display: block;
  color: var(--color-muted);
  font-size: var(--type-small);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:not(.is-filtered) > .shop-grid.is-index .shop-card-lead,
:not(.is-filtered) > .shop-grid.is-index .shop-card-dur,
:not(.is-filtered) > .shop-grid.is-index .shop-card-items,
:not(.is-filtered) > .shop-grid.is-index .shop-card-team { display: none; }
:not(.is-filtered) > .shop-grid.is-index .shop-quick { position: static; flex: none; margin: 0 var(--size-12); opacity: 1; }
@media (hover: hover) {
  :not(.is-filtered) > .shop-grid.is-index .shop-card:hover { background: var(--color-surface); }
  :not(.is-filtered) > .shop-grid.is-index .shop-card:hover .shop-shot { background-color: var(--shop-stage-bg-hover); }
}
@media screen and (max-width: 47.9375em) {
  :not(.is-filtered) > .shop-grid.is-index .shop-card { grid-template-columns: 3rem minmax(0, 1fr); }
  :not(.is-filtered) > .shop-grid.is-index .shop-shot { width: 3rem; }
  :not(.is-filtered) > .shop-grid.is-index .shop-card-more,
  :not(.is-filtered) > .shop-grid.is-index .shop-card-row b { display: none; }
  :not(.is-filtered) > .shop-grid.is-index .shop-spec-fam { display: inline; }
}

/* Vedette : une fiche en grand (2 colonnes de cartes, toute la hauteur des cartes voisines), les autres à côté. */
:not(.is-filtered) > .shop-grid.is-vedette { grid-auto-flow: dense; }
:not(.is-filtered) > .shop-grid.is-vedette .is-feature { grid-column: 1 / -1; }
:not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-card { display: grid; grid-template-columns: minmax(0, 1fr); }
:not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-shot { aspect-ratio: 4 / 3; }
:not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-picto-svg { width: min(34cqw, 40cqh); stroke-width: 0.35; }
:not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-card-meta { gap: var(--size-12); padding: var(--size-16) var(--size-16) 5.5rem; }
:not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-card-title { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); font-weight: var(--weight-regular); letter-spacing: -0.02em; }
:not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-card-more {
  display: flex;
  flex-direction: column;
  border-top: var(--shop-rule);
}
:not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-card-lead { padding: var(--size-8) 0; font-size: var(--type-body); line-height: 1.45; text-wrap: pretty; }
:not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-card-ideal,
:not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-card-dur {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--size-12);
  padding: var(--size-8) 0;
  border-top: var(--shop-rule);
  font-size: var(--type-small);
  line-height: 1.45;
}
:not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-card-dur { order: 1; }
:not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-card-ideal { order: 2; }
:not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-quick { display: none; }
:not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-card-add {
  display: flex;
  position: absolute;
  left: var(--size-16);
  right: var(--size-16);
  bottom: var(--size-16);
}
.shop-cell-link {
  grid-column: span var(--shop-card-span);
  display: flex;
  align-items: flex-end;
  padding: var(--size-16);
  background: var(--color-surface);
}
@media screen and (min-width: 80em) {
  :not(.is-filtered) > .shop-grid.is-vedette .is-feature { grid-column: 1 / span 6; grid-row: span var(--shop-side-rows, 2); }
  :not(.is-filtered) > .shop-grid.is-vedette.is-right .is-feature { grid-column: 7 / span 6; }
  :not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-card { height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
  :not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-shot { aspect-ratio: auto; min-height: 18rem; }
}

/* Set (bundles) : une ligne large par bundle, composition de pictos à gauche, contenu à droite. */
:not(.is-filtered) > .shop-grid.is-set > li {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto auto;
}
:not(.is-filtered) > .shop-grid.is-set .shop-card {
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
:not(.is-filtered) > .shop-grid.is-set .shop-shot { grid-column: 1; grid-row: 1 / 3; aspect-ratio: 8 / 5; }
:not(.is-filtered) > .shop-grid.is-set .shop-card-meta { grid-column: 2; grid-row: 1; gap: var(--size-12); padding: var(--size-20) var(--size-20) var(--size-12); }
:not(.is-filtered) > .shop-grid.is-set .shop-card-title { font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem); font-weight: var(--weight-regular); letter-spacing: -0.02em; }
:not(.is-filtered) > .shop-grid.is-set .shop-card-more { display: flex; flex-direction: column; gap: var(--size-12); }
:not(.is-filtered) > .shop-grid.is-set .shop-card-lead { font-size: var(--type-body); line-height: 1.45; }
:not(.is-filtered) > .shop-grid.is-set .shop-card-ideal,
:not(.is-filtered) > .shop-grid.is-set .shop-card-dur { display: none; }
:not(.is-filtered) > .shop-grid.is-set .shop-card-items { display: flex; flex-wrap: wrap; gap: var(--size-4) var(--size-16); font-size: var(--type-small); }
:not(.is-filtered) > .shop-grid.is-set .shop-card-items > span::before { content: "\2713"; margin-right: 0.4em; font-family: var(--shop-mono); }
:not(.is-filtered) > .shop-grid.is-set .shop-card-team {
  font-family: var(--shop-mono);
  font-size: var(--shop-mono-size);
  letter-spacing: var(--shop-mono-track);
  text-transform: uppercase;
  color: var(--color-muted);
}
:not(.is-filtered) > .shop-grid.is-set .shop-quick { display: none; }
:not(.is-filtered) > .shop-grid.is-set .shop-card-add {
  display: flex;
  grid-column: 2;
  grid-row: 2;
  z-index: 1;
  align-self: end;
  justify-self: start;
  margin: 0 var(--size-20) var(--size-20);
}
@media screen and (max-width: 47.9375em) {
  :not(.is-filtered) > .shop-grid.is-set > li { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  :not(.is-filtered) > .shop-grid.is-set .shop-card { grid-row: 1 / 3; }
  :not(.is-filtered) > .shop-grid.is-set .shop-shot { grid-column: 1; grid-row: 1; }
  :not(.is-filtered) > .shop-grid.is-set .shop-card-meta { grid-column: 1; grid-row: 2; }
  :not(.is-filtered) > .shop-grid.is-set .shop-card-add { grid-column: 1; grid-row: 3; margin: 0 var(--size-20) var(--size-20); }
}

.shop-grid.is-rail .shop-shot { flex: none; }
.shop-grid.is-rail .shop-card-row { flex-direction: column; align-items: flex-start; gap: 2px; }
/* Grille simple : 3 grandes cartes par rangée sur grand écran (6 fiches = 2 rangées pleines). */
@media screen and (min-width: 80em) {
  .shop-aisle.is-grille:not(.is-filtered) > .shop-grid > li { grid-column: span 4; }
}
@media screen and (max-width: 47.9375em) { .shop-rail-arrows { display: none !important; } }

/* Icône panier (Streamline Ultimate Light) : ajout rapide, pastille, bouton principal. */
.shop-cart-svg { display: block; flex: none; width: 1rem; height: 1rem; stroke-width: 1.4; overflow: visible; }
.shop-pill .shop-cart-svg { width: 0.95rem; height: 0.95rem; }
.shop-add .shop-cart-svg { width: 1.125rem; height: 1.125rem; }
.shop-add[aria-pressed="true"] .shop-cart-svg { display: none; }

/* Ajout rapide : rectangle icône panier + « Ajouter au panier », au survol sur ordinateur. */
.shop-quick,
.shop-grid .shop-quick {
  display: inline-flex;
  align-items: center;
  gap: var(--size-8);
  width: auto;
  height: 2rem;
  padding: 0 var(--size-12) 0 var(--size-8);
  border: var(--rule-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--shop-mono);
  font-size: 0.625rem;
  letter-spacing: var(--shop-mono-track);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.shop-quick-icon { display: none; }
.shop-quick-on { display: none; }
.shop-quick[aria-pressed="true"] { background: var(--color-text); color: var(--color-background); }
.shop-quick[aria-pressed="true"] .shop-quick-off { display: none; }
.shop-quick[aria-pressed="true"] .shop-quick-on { display: inline; }
.shop-quick[aria-pressed="true"] .shop-quick-on::after { content: " \2713"; }
.shop-quick:hover { background: var(--color-text); color: var(--color-background); }
/* Petites vignettes (mobile 2 colonnes, rail) : l'icône seule, zone tactile de 44 px. */
@media screen and (max-width: 47.9375em) {
  .shop-grid .shop-quick { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; }
  .shop-grid .shop-quick .shop-quick-off,
  .shop-grid .shop-quick .shop-quick-on { display: none !important; }
  .shop-grid .shop-quick .shop-cart-svg { width: 1.25rem; height: 1.25rem; }
}
.shop-grid.is-rail .shop-quick { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; }
.shop-grid.is-rail .shop-quick .shop-quick-off,
.shop-grid.is-rail .shop-quick .shop-quick-on { display: none !important; }

/* Pastille « Mon panier » : l'icône panier seule, le nombre dans une pastille ronde. */
.shop-pill,
.shop-pill.is-bar:not([hidden]) {
  position: relative;
  gap: 0;
  padding: var(--size-8);
  border: 0;
  background: transparent;
}
.shop-pill:hover { background: transparent; color: var(--color-text); }
.shop-pill .shop-cart-svg { width: 1.5rem; height: 1.5rem; stroke-width: 1.2; }
.shop-pill .shop-pill-n {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  box-shadow: none;
  background: var(--color-text);
  color: var(--color-background);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-strong);
  line-height: 1;
}
.shop-pill .shop-pill-n::after { display: none; }
.shop-pill:hover .shop-pill-n { box-shadow: none; background: var(--color-text); color: var(--color-background); }
.shop-pill:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.shop-pill.is-bumped { animation: shop-pill-pop 180ms ease-out; }
@keyframes shop-pill-pop { 50% { transform: scale(1.12); } }
/* Tiroir : le nombre à côté du titre, rond aussi. */
.shop-drawer-title .shop-pill-n { border-radius: 999px; min-width: 1.375rem; height: 1.375rem; font-family: var(--font-body); font-size: 0.75rem; box-shadow: none; }
.shop-drawer-title .shop-pill-n::after { display: none; }
@media (prefers-reduced-motion: reduce) { .shop-pill.is-bumped { animation: none; } }
/* Panier de la navigation : zone tactile de 44 px, icône à la couleur des liens, pastille centrée. */
.shop-pill,
.shop-pill.is-bar:not([hidden]) { width: 2.75rem; height: 2.75rem; justify-content: center; padding: 0; color: var(--nav-ink, var(--color-text)); }
.shop-pill .shop-cart-svg { width: 1.375rem; height: 1.375rem; stroke-width: 1.3; }
.shop-pill .shop-pill-n {
  top: 2px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.0625rem;
  height: 1.0625rem;
  padding: 0 0.3em;
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
}
.shop-pill .shop-cart-svg { stroke-width: 1; }

/* Photos d'objet (champ « Objet ») : « remplir » = photo pleine qui couvre la vignette, cadrage centré ;
   « poser » = objet détouré centré sur le fond gris (≈ 70 % de la case). Le picto reste sans photo. */
.shop-object { background: var(--shop-stage-bg); overflow: hidden; }
.shop-object img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: center;
  transition: transform 180ms ease-out;
}
.shop-object.is-pose img { object-fit: contain; padding: 15%; box-sizing: border-box; }
.shop-shot.has-object > .shop-object { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.shop-pdp .shop-shot.has-object { background-image: none; }
@media (hover: hover) {
  .shop-card:hover .shop-object img { transform: scale(1.03); }
}
.shop-mini.has-photo { overflow: hidden; background: var(--shop-stage-bg); }
.shop-mini.has-photo img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.shop-mini.has-photo.is-pose img { object-fit: contain; padding: 8%; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  .shop-object img { transition: none; }
  .shop-card:hover .shop-object img { transform: none; }
}

/* Échelle des photos d'objet : l'objet est réduit dans sa case au lieu de la remplir.
   Réglage unique : --shop-objet-echelle (part de la plus petite dimension de la case).
   --shop-objet-fond = crème moyen des bords des 22 photos (#dfd7d1, médiane mesurée à l'import du 12/11) ;
   les bords de la photo sont fondus dans ce fond (masque), pour qu'aucun raccord ne se voie. */
:root {
  --shop-objet-echelle: 0.76;          /* cartes standard */
  --shop-objet-echelle-vedette: 0.62;  /* grande case mise en avant */
  --shop-objet-echelle-fiche: 0.8;     /* fiche produit et téléphone */
  --shop-objet-echelle-bundle: 1;      /* visuels de bundles : la composition a déjà sa marge, pas de réduction */
  --shop-objet-fond: #dfd7d1;
  --shop-objet-fondu: 10%;             /* largeur du fondu sur chaque bord de la photo */
  --shop-objet-decalage-k: 0.03;       /* un peu plus bas que le centre (part de la case) */
}
/* La case prend le crème de sa photo (style posé sur .shop-object par le serveur) ; #dfd7d1 par défaut. */
.shop-shot.has-object,
.shop-pdp .shop-shot.has-object { background: var(--shop-objet-fond); }
.shop-shot.has-object .shop-object { background: var(--shop-objet-fond); }
.shop-object.is-fill {
  --k: var(--shop-objet-echelle);
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-object.is-fill img {
  flex: none;
  width: calc(var(--k) * min(100cqw, 100cqh));
  height: calc(var(--k) * min(100cqw, 100cqh));
  object-fit: contain;
  translate: 0 calc(min(100cqw, 100cqh) * var(--shop-objet-decalage-k, 0.03));
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--shop-objet-fondu), #000 calc(100% - var(--shop-objet-fondu)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--shop-objet-fondu), #000 calc(100% - var(--shop-objet-fondu)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 var(--shop-objet-fondu), #000 calc(100% - var(--shop-objet-fondu)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--shop-objet-fondu), #000 calc(100% - var(--shop-objet-fondu)), transparent);
  mask-composite: intersect;
}
:not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-object.is-fill { --k: var(--shop-objet-echelle-vedette); }
.shop-pdp .shop-object.is-fill { --k: var(--shop-objet-echelle-fiche); }
@media screen and (max-width: 47.9375em) {
  .shop-object.is-fill { --k: var(--shop-objet-echelle-fiche); }
  :not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-object.is-fill { --k: var(--shop-objet-echelle-fiche); }
}
/* Le fond ne fonce plus au survol (il trahirait le bord de la photo) : seul l'objet bouge. */
@media (hover: hover) {
  .shop-card:hover .shop-shot.has-object,
  :not(.is-filtered) > .shop-grid.is-index .shop-card:hover .shop-shot.has-object { background-color: var(--shop-objet-fond); }
}

/* Bundles : composition déjà cadrée (groupe ≈ 85 % de la largeur), fond uni = couleur de la case. */
.shop-object.is-fill.is-set,
.shop-pdp .shop-object.is-fill.is-set,
:not(.is-filtered) > .shop-grid.is-vedette .is-feature .shop-object.is-fill.is-set { --k: var(--shop-objet-echelle-bundle); }
.shop-object.is-fill.is-set img { translate: none; }

/* Un rayon masqué par le filtre reste masqué, quel que soit son display (citation client en grid). */
[data-aisle][hidden] { display: none !important; }