body { margin: 0; font-family: var(--font-sans); background: var(--surface); color: var(--ink); }
.s3-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }

.s3-btn { font: inherit; font-family: var(--font-sans); font-size: 15px; font-weight: 500; line-height: 20px; height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.s3-btn:hover { border-color: var(--ink); }
.s3-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.s3-btn:disabled { opacity: .45; cursor: not-allowed; }
.s3-btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 700; }
.s3-btn-primary:hover { border-color: var(--ink); }
.s3-btn-quiet { background: transparent; border-color: transparent; color: var(--brand-text); }
.s3-btn-quiet:hover { background: var(--brand-soft); border-color: transparent; }
.s3-btn-sm { height: 32px; font-size: 14px; padding: 0 var(--space-3); }

.s3-badge { display: inline-block; font-size: 12px; font-weight: 500; line-height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink); }
.s3-badge-brand { background: var(--brand-soft); color: var(--brand-text); }
.s3-badge-success { background: var(--success-soft); color: var(--success); }
.s3-badge-danger { background: var(--danger-soft); color: var(--danger); }

.s3-card { width: 260px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.s3-card:hover { box-shadow: var(--shadow-pop); }
.s3-card-media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-sunken); }
.s3-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.s3-card-layers { position: absolute; inset: 30% 25%; background: repeating-linear-gradient(to bottom, var(--line-strong) 0 6px, transparent 6px 10px); border-radius: var(--radius-sm); border-top: 6px solid var(--brand); }
/* Quand une vraie image est fournie, ce placeholder reste caché sauf si l'image échoue à charger. */
.s3-card-media img + .s3-card-layers { display: none; }
.s3-card-media img + .s3-card-layers.s3-card-layers-visible { display: block; }
.s3-card-badge { position: absolute; top: var(--space-3); left: var(--space-3); }
.s3-card-body { padding: var(--space-4); }
.s3-card-title { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }
.s3-card-spec { margin: var(--space-1) 0 0; font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.s3-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-4); }
.s3-card-price { font-size: 18px; line-height: 24px; font-weight: 700; color: var(--ink); }