/* doc-project | public/assets/css/components.css | stylise boutons, badges, alertes, cartes, grilles, tableaux et états réutilisables */
.button { display: inline-flex; min-height: 2.85rem; align-items: center; justify-content: center; gap: .55rem; border: 1px solid var(--wine); border-radius: var(--radius-pill); background: var(--wine); color: white; padding: .65rem 1.15rem; font-size: .9rem; font-weight: 800; line-height: 1.2; box-shadow: 0 9px 24px rgb(93 35 54 / 16%); transition: transform .2s var(--ease), background .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); background: var(--wine-dark); box-shadow: 0 14px 30px rgb(93 35 54 / 22%); }
.button--secondary { border-color: var(--gold-soft); background: var(--gold-soft); color: var(--wine-dark); box-shadow: none; }
.button--secondary:hover { background: #ead9b8; }
.button--ghost { border-color: var(--line-dark); background: transparent; color: var(--ink); box-shadow: none; }
.button--ghost:hover { border-color: var(--rose); background: white; }
.button--danger { border-color: var(--danger); background: var(--danger); }
.button--large { min-height: 3.35rem; padding-inline: 1.45rem; }
.button--small { min-height: 2.35rem; padding: .45rem .8rem; font-size: .78rem; }
.button--full { width: 100%; }
.icon-button { display: inline-grid; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; background: white; color: var(--wine); transition: transform .2s, border-color .2s, background .2s, color .2s; }
.icon-button:hover { transform: translateY(-2px); border-color: var(--rose); background: var(--blush); }
.icon-button--filled { border-color: var(--wine); background: var(--wine); color: white; }
.icon-button--danger { color: var(--danger); }
.icon-button.is-favorite { border-color: var(--rose); background: var(--blush); color: var(--wine); }
.badge { display: inline-flex; align-items: center; min-height: 1.7rem; border-radius: var(--radius-pill); padding: .2rem .65rem; background: var(--paper); color: var(--ink); font-size: .68rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; box-shadow: var(--shadow-sm); }
.badge--new { background: var(--wine); color: white; }
.badge--sale { background: var(--gold-soft); color: #6e4c18; }
.badge--muted { background: #eee9e9; color: var(--ink-soft); }
.status-pill { display: inline-flex; align-items: center; width: fit-content; border-radius: var(--radius-pill); background: #eee9e9; color: var(--ink-soft); padding: .28rem .65rem; font-size: .7rem; font-weight: 800; line-height: 1.3; text-transform: capitalize; white-space: nowrap; }
.status-pill--paid, .status-pill--active { background: #dfece4; color: #315b42; }
.status-pill--pending, .status-pill--processing, .status-pill--draft { background: #f5ead2; color: #7c5614; }
.status-pill--failed, .status-pill--cancelled, .status-pill--archived { background: #f5dddd; color: #852d31; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.product-grid--scroll { display: flex; gap: .9rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .6rem; }
.product-grid--scroll::-webkit-scrollbar { display: none; }
.product-grid--scroll > * { width: min(78vw, 18rem); flex: 0 0 auto; scroll-snap-align: start; }
.product-placeholder { display: grid; width: 100%; height: 100%; min-height: 10rem; place-items: center; align-content: center; gap: .65rem; background: radial-gradient(circle at 30% 20%, #fff 0, var(--blush) 45%, #ead5d9 100%); color: var(--wine); }
.product-placeholder .icon { width: 3rem; height: 3rem; opacity: .72; }
.product-placeholder small { color: var(--ink-soft); font-size: .75rem; font-weight: 700; }
.product-placeholder--bag { background: radial-gradient(circle at 30% 20%, #fff 0, #f1e8db 48%, #e3d2b9 100%); color: #79542d; }
.product-placeholder--large { min-height: 26rem; border-radius: var(--radius-lg); }
.empty-state { display: grid; min-height: 22rem; place-items: center; align-content: center; gap: .75rem; text-align: center; padding: 3rem 1.5rem; }
.empty-state > .icon { width: 3.5rem; height: 3.5rem; color: var(--rose); }
.empty-state h2, .empty-state h3, .empty-state p { margin-bottom: 0; }
.empty-state p { color: var(--ink-soft); }
.empty-state--small { min-height: 12rem; }
.notice { display: flex; gap: .75rem; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); padding: 1rem; color: var(--ink-soft); }
.notice--warning { border-color: #e6ca91; background: #fff7e7; color: #714c12; }
.flash-stack { position: fixed; z-index: 900; top: 5rem; left: 50%; display: grid; width: min(calc(100% - 1.5rem), 38rem); gap: .6rem; transform: translateX(-50%); }
.flash { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: white; padding: .75rem .85rem; box-shadow: var(--shadow-md); }
.flash--success { border-color: #b7d3c0; }
.flash--error { border-color: #e0b6b8; }
.flash--warning { border-color: #e8cf9d; }
.flash__close { width: 2rem; height: 2rem; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: 2.2rem; }
.pagination a { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; background: white; font-weight: 800; }
.pagination a.is-current { border-color: var(--wine); background: var(--wine); color: white; }
.admin-panel { border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 5px 20px rgb(36 29 32 / 4%); }
.admin-panel__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.15rem; border-bottom: 1px solid var(--line); }
.admin-panel__heading h2 { margin: .15rem 0 0; font-family: var(--font-body); font-size: 1.05rem; font-weight: 850; }
.admin-panel__heading p { margin-bottom: 0; color: var(--ink-soft); font-size: .82rem; }
.responsive-table { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th { background: #faf7f5; color: var(--ink-soft); font-size: .7rem; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
th, td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
td strong, td small { display: block; }
td small { color: var(--ink-soft); }
.admin-list { display: grid; }
.admin-list > a { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto auto; gap: .75rem; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.admin-list > a:last-child { border-bottom: 0; }
.admin-list > a:hover { background: #fbf8f6; }
.admin-list__avatar, .admin-avatar { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: 50%; background: var(--blush); color: var(--wine); font-size: .8rem; font-weight: 900; }
.empty-copy { margin: 0; padding: 2rem 1rem; color: var(--ink-soft); text-align: center; }
@media (min-width: 700px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .product-grid--scroll > * { width: 18rem; }
}
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }