/* ============================================================
   Boutique (espace adhérent) — catalogue, fiche, panier, commandes
   ============================================================ */

/* Onglets de l'espace membre (Mon adhésion / Boutique / Mes commandes) */
.member-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: clamp(20px, 3vw, 32px) 0 0;
}
.member-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-deep);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  text-decoration: none;
  transition: all 0.2s var(--ease);
}
.member-tab:hover { color: var(--c-blue); border-color: rgba(35, 111, 168, 0.3); background: rgba(35, 111, 168, 0.06); }
.member-tab[aria-current="page"] {
  color: #fff;
  background: linear-gradient(135deg, var(--c-blue), var(--c-deep));
  border-color: transparent;
  box-shadow: 0 4px 12px -2px rgba(35, 111, 168, 0.35);
}
.shop-cart-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--c-cyan);
  color: var(--c-deep);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.shop-cart-count[hidden] { display: none; }

.shop { padding: clamp(24px, 3vw, 36px) 0 clamp(48px, 6vw, 80px); }
.shop-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.shop-title { font-family: var(--f-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 36px); color: var(--c-deep); margin: 0; }
.shop-sub { margin: 4px 0 0; color: var(--c-mute); font-size: 14px; }
.shop-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  background: var(--c-deep);
  color: #fff;
  border: 0;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.shop-cart-btn:hover { background: var(--c-blue); }
.shop-notice {
  margin: 0 0 18px;
  padding: 12px 16px;
  background: var(--c-cream);
  border-left: 3px solid var(--c-gold);
  font-size: 14px;
  color: var(--c-ink);
}
.shop-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.shop-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-cat {
  padding: 8px 14px;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  font: inherit;
  font-size: 13.5px;
  color: var(--c-deep);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.shop-cat:hover { border-color: var(--c-blue); }
.shop-cat[aria-pressed="true"] { background: var(--c-deep); border-color: var(--c-deep); color: #fff; }
.shop-search { max-width: 280px; width: 100%; }

/* Grille d'articles */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.shop-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #fff;
  border: 1px solid var(--c-line);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.shop-card:hover, .shop-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(35, 111, 168, 0.35);
  box-shadow: 0 14px 30px -18px rgba(10, 31, 56, 0.45);
}
.shop-card:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.shop-card-media { position: relative; display: block; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.shop-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: opacity 0.35s var(--ease); }
.shop-card-back { opacity: 0; }
.shop-card:hover .has-back .shop-card-back, .shop-card:focus-visible .has-back .shop-card-back { opacity: 1; }
.shop-card:hover .has-back img:not(.shop-card-back), .shop-card:focus-visible .has-back img:not(.shop-card-back) { opacity: 0; }
.shop-card-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-line); }
.shop-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  background: var(--c-deep);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.shop-card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; border-top: 1px solid var(--c-line); flex: 1; }
.shop-card-ref { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-mute); }
.shop-card-name { font-weight: 600; font-size: 15px; color: var(--c-deep); line-height: 1.3; flex: 1; }
.shop-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; }
.shop-card-sizes { font-size: 12.5px; color: var(--c-mute); }
.shop-card-price { font-family: var(--f-display); font-size: 20px; color: var(--c-blue); white-space: nowrap; }
.shop-empty { color: var(--c-mute); padding: 24px 0; }
.shop-loading { padding: 40px 0; }

/* Modales boutique */
.shop-overlay .shop-modal { position: relative; max-width: 960px; width: calc(100% - 32px); padding: 0; }
.shop-modal-close { position: absolute; top: 10px; right: 12px; z-index: 2; }
.shop-product { display: grid; grid-template-columns: 1fr; }
@media (min-width: 820px) { .shop-product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.shop-gallery { padding: 24px; background: #fff; border-right: 1px solid var(--c-line); }
.shop-gallery-main { aspect-ratio: 1 / 1; display: grid; place-items: center; }
.shop-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.shop-thumbs { display: flex; gap: 10px; margin-top: 12px; justify-content: center; }
.shop-thumb { width: 72px; height: 72px; padding: 4px; background: #fff; border: 2px solid var(--c-line); cursor: pointer; }
.shop-thumb img { width: 100%; height: 100%; object-fit: contain; }
.shop-thumb[aria-pressed="true"] { border-color: var(--c-cyan); }
.shop-detail { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 14px; max-height: min(86vh, 760px); overflow-y: auto; }
.shop-detail-ref { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-mute); }
.shop-detail-name { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(24px, 3vw, 30px); color: var(--c-deep); padding-right: 24px; }
.shop-detail-price { margin: 0; font-family: var(--f-display); font-size: 26px; color: var(--c-blue); }
.shop-detail-desc { margin: 0; color: var(--c-ink); font-size: 14.5px; }
.shop-field { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; /* un fieldset prend sinon la largeur de son contenu (guide des tailles) */ }
.shop-field legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-deep); }
.shop-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-size { position: relative; }
.shop-size input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.shop-size span {
  display: inline-block;
  min-width: 46px;
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  background: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-deep);
  transition: all 0.15s var(--ease);
}
.shop-size:hover span { border-color: var(--c-blue); }
.shop-size input:checked + span { background: var(--c-deep); border-color: var(--c-deep); color: #fff; box-shadow: 0 0 0 2px var(--c-cyan); }
.shop-size input:focus-visible + span { outline: 2px solid var(--c-blue); outline-offset: 2px; }
/* Guide des tailles : le lien de la fiche remplace le formulaire par le guide,
   dans la même fenêtre (colonne de droite ; sur mobile, la photo s'efface). */
.shop-guide-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; }
.shop-guide-link:hover { color: var(--c-deep); }
.shop-detail[hidden] { display: none; }
.shop-guide-panel { gap: 0; }
.shop-guide-back { align-self: flex-start; margin: 0 0 14px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--c-blue); }
.shop-guide-back:hover { color: var(--c-deep); }
.shop-guide-head { padding-right: 24px; }
@media (max-width: 819px) { .shop-product.is-guide .shop-gallery { display: none; } }
.shop-guide-cat { display: inline-block; margin-bottom: 8px; padding: 3px 12px; border-radius: 999px; background: var(--c-gold); color: var(--c-deep); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.shop-guide-head h2 { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(22px, 3vw, 28px); line-height: 1.15; color: var(--c-deep); }
.shop-guide-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--c-mute); }
.shop-guide-figure { display: flex; align-items: center; gap: 20px; margin-top: 16px; }
.shop-guide-sketch { flex: none; color: var(--c-deep); }
.shop-guide-sketch .is-a { stroke: var(--c-deep); }
.shop-guide-sketch .is-b { stroke: var(--c-blue); }
.shop-guide-figure ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--c-deep); }
.shop-guide-figure li { display: flex; align-items: center; gap: 10px; }
.shop-guide-letter { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; }
.shop-guide-letter.is-a { background: var(--c-deep); }
.shop-guide-letter.is-b { background: var(--c-blue); }
.shop-guide-hint { margin: 16px 0 8px; font-size: 13.5px; color: var(--c-mute); }
.shop-guide-scroll { overflow-x: auto; }
.shop-guide-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.shop-guide-table th, .shop-guide-table td { padding: 10px 10px; border-bottom: 1px solid var(--c-line); text-align: center; white-space: nowrap; }
.shop-guide-table thead th { background: rgba(35, 111, 168, 0.07); color: var(--c-mute); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: normal; line-height: 1.3; }
.shop-guide-table th:first-child { text-align: left; }
.shop-guide-table tbody th { font-weight: 700; color: var(--c-deep); }
.shop-guide-table tbody td { color: var(--c-deep); }
.shop-guide-table tr.is-pickable { cursor: pointer; }
.shop-guide-table tr.is-pickable:hover, .shop-guide-table tr.is-pickable:focus-within, .shop-guide-table tr.is-current { background: rgba(35, 111, 168, 0.08); }
.shop-guide-pick { width: 1%; text-align: right !important; }
.shop-guide-pick button { padding: 4px 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--c-blue); opacity: 0; }
.shop-guide-table tr:hover .shop-guide-pick button, .shop-guide-pick button:focus-visible, .shop-guide-table tr.is-current .shop-guide-pick button { opacity: 1; }
@media (hover: none) { .shop-guide-pick button { opacity: 1; } }
.shop-guide-foot { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--c-mute); }
.shop-guide-foot p { margin: 0; }
@media (max-width: 520px) {
  .shop-guide-table th, .shop-guide-table td { padding: 10px 8px; font-size: 14px; }
  .shop-guide-table thead th { font-size: 11px; letter-spacing: 0.04em; }
  /* Pas de colonne « Choisir » : la ligne entière se touche, la taille choisie reste surlignée. */
  .shop-guide-pick { display: none; }
}
.shop-flock-row { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--c-ink); }
.shop-flock-row em, .shop-perso em { font-style: normal; font-size: 12px; color: var(--c-mute); }
.shop-flock-toggle { cursor: pointer; }
.shop-flock-toggle input { width: 18px; height: 18px; accent-color: var(--c-blue); margin: 0; }
.shop-check { display: inline-grid; place-items: center; width: 18px; height: 18px; background: var(--c-blue); color: #fff; font-size: 12px; }
.shop-perso { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.shop-perso input { padding: 10px 12px; border: 1px solid var(--c-line); font: inherit; font-size: 15px; }
.shop-perso input:focus { outline: 2px solid var(--c-blue); outline-offset: 0; border-color: var(--c-blue); }
.shop-perso-hint { color: var(--c-mute); font-size: 12px; }
.shop-buy { display: flex; gap: 12px; align-items: stretch; margin-top: 4px; flex-wrap: wrap; }
.shop-add { flex: 1; min-width: 220px; }
.shop-qty { display: inline-flex; align-items: center; border: 1px solid var(--c-line); background: #fff; }
.shop-qty button { width: 40px; height: 44px; border: 0; background: none; font-size: 18px; color: var(--c-deep); cursor: pointer; }
.shop-qty button:hover { background: var(--c-cream); }
.shop-qty output { min-width: 28px; text-align: center; font-weight: 600; }
.shop-qty--sm button { width: 30px; height: 30px; font-size: 16px; }
.shop-error { margin: 0; color: #9b1c1c; font-size: 14px; }

/* Tiroir panier */
.shop-drawer { justify-content: flex-end; align-items: stretch; padding: 0; }
.shop-drawer .shop-modal {
  width: min(460px, 100%);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  transform: translateX(24px);
  transition: transform 0.25s var(--ease);
}
.shop-drawer.open .shop-modal { transform: none; }
.shop-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--c-line); }
.shop-drawer-head h2 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 24px; color: var(--c-deep); }
.shop-drawer-body { flex: 1; overflow-y: auto; padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.shop-lines, .shop-order-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.shop-line, .shop-order-items li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-line); align-items: center; }
.shop-line-img { flex: 0 0 64px; height: 64px; background: #fff; border: 1px solid var(--c-line); display: grid; place-items: center; }
.shop-line-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.shop-line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--c-deep); }
.shop-line-meta { font-size: 12.5px; color: var(--c-mute); }
.shop-line-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.shop-line-price { font-size: 14px; color: var(--c-deep); white-space: nowrap; }
.shop-drawer-foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--c-line); }
.shop-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 15px; }
.shop-total strong { font-family: var(--f-display); font-size: 24px; color: var(--c-deep); font-weight: 500; }
.shop-cart-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 12px; color: var(--c-mute); text-align: center; }
.shop-cart-empty svg { width: 40px; height: 40px; }
.shop-back { align-self: flex-start; }
.shop-step-title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-deep); }
.shop-pay { display: flex; flex-direction: column; gap: 8px; }
.shop-pay-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px 12px 42px;
  border: 2px solid var(--c-line);
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}
.shop-pay-opt input { position: absolute; left: 14px; top: 15px; margin: 0; accent-color: var(--c-blue); }
.shop-pay-opt span { font-size: 12.5px; color: var(--c-mute); }
.shop-pay-opt:has(input:checked) { border-color: var(--c-cyan); background: rgba(50, 188, 236, 0.06); }
.shop-note { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.shop-note em { font-style: normal; color: var(--c-mute); font-size: 12px; }
.shop-note textarea { resize: none; padding: 10px 12px; border: 1px solid var(--c-line); font: inherit; font-size: 14px; }
.shop-done { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding-top: 8px; }
.shop-done h3 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 24px; color: var(--c-deep); }
.shop-done p { margin: 0; font-size: 14.5px; }
.shop-done-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #E1F5EE; color: #0F6E4F; font-size: 22px; font-weight: 700; }
.shop-done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.shop-bank { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; padding: 12px 14px; background: var(--c-cream); font-size: 14px; width: 100%; box-sizing: border-box; }
.shop-bank dt { color: var(--c-mute); }
.shop-bank dd { margin: 0; word-break: break-all; }
.shop-pay-note { margin: 0; padding: 12px 14px; background: var(--c-cream); font-size: 14px; }

/* Mes commandes */
.shop-orders { display: flex; flex-direction: column; gap: 18px; }
.shop-order { background: #fff; border: 1px solid var(--c-line); border-left: 3px solid var(--c-blue); padding: 18px 20px; }
.shop-order.is-cancelled { border-left-color: var(--c-line); opacity: 0.8; }
.shop-order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.shop-order-head h3 { margin: 0; font-size: 17px; color: var(--c-deep); }
.shop-order-date { margin: 2px 0 0; font-size: 13px; color: var(--c-mute); }
.shop-order-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.shop-steps { list-style: none; display: flex; margin: 16px 0 6px; padding: 0; counter-reset: step; }
.shop-steps li { flex: 1; position: relative; font-size: 12px; color: var(--c-mute); text-align: center; padding-top: 22px; }
.shop-steps li::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-line);
  z-index: 1;
}
.shop-steps li + li::after { content: ''; position: absolute; top: 9px; right: 50%; width: 100%; height: 2px; background: var(--c-line); }
.shop-steps li.is-done, .shop-steps li.is-current { color: var(--c-deep); }
.shop-steps li.is-done::before { background: var(--c-blue); border-color: var(--c-blue); }
.shop-steps li.is-current::before { background: var(--c-cyan); border-color: var(--c-cyan); box-shadow: 0 0 0 4px rgba(50, 188, 236, 0.2); }
.shop-steps li.is-done + li::after, .shop-steps li.is-done + li.is-current::after { background: var(--c-blue); }
.shop-steps li.is-current span { font-weight: 600; }
.shop-order-qty { font-size: 13px; color: var(--c-mute); white-space: nowrap; }
.shop-order-foot { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.shop-order-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.shop-act.shop-act--lg { height: 42px; padding: 0 18px; font-size: 14px; gap: 8px; }
@media (max-width: 560px) {
  /* Téléphone : boutons pleine largeur, action principale (paiement) en haut. */
  .shop-order-actions { flex-direction: column-reverse; align-items: stretch; }
  .shop-order-actions .shop-act { justify-content: center; }
}
.shop-order-actions:empty { display: none; }

@media (max-width: 720px) {
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .shop-card-name { font-size: 14px; }
  .shop-card-price { font-size: 17px; }
  .shop-search { max-width: none; }
  .shop-gallery { border-right: 0; border-bottom: 1px solid var(--c-line); padding: 16px 16px 12px; }
  .shop-gallery-main { max-height: 300px; aspect-ratio: auto; height: 260px; }
  .shop-detail { padding: 20px 18px; max-height: none; }
  .shop-overlay.shop-product-overlay .shop-modal { max-height: 92vh; overflow-y: auto; }
  .shop-steps li { font-size: 11px; }
}

/* Mobile : la colonne de la fiche ne doit pas s'élargir au tableau des tailles
   (il défile dans son propre conteneur) ; onglets de l'espace membre sur une ligne. */
.shop-product { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .shop-product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.shop-detail, .shop-gallery { min-width: 0; }
@media (max-width: 480px) {
  .member-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
  .member-tab { padding: 9px 11px; font-size: 13px; white-space: nowrap; }
}

/* ============================================================
   Administration de la boutique (#admin/shop)
   ============================================================ */
.shop-kpis { margin-bottom: 22px; }
.shop-admin-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.shop-cat-n { opacity: 0.65; font-size: 12px; margin-left: 2px; }
.shop-batchbar {
  position: sticky;
  top: calc(var(--header-h, 84px) + 8px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--c-deep);
  color: #fff;
  box-shadow: 0 10px 24px -14px rgba(10, 31, 56, 0.6);
}
.shop-batchbar[hidden] { display: none; }
/* Colonnes de largeur fixe (chaque ligne est sa propre grille : des largeurs
   « auto » désaligneraient les lignes) ; actions alignées à droite. */
.shop-admin-table .data-table-row {
  grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1.7fr) 80px 100px 120px 150px 136px;
  gap: 16px;
  padding: 18px 22px;
}
.shop-admin-table .is-center { text-align: center; }
.shop-admin-table .is-right { text-align: right; }
.shop-admin-table .is-center .shop-admin-date { text-align: center; }
.shop-admin-qty { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--c-deep); }
.shop-admin-table .shop-toggle { padding: 0; text-align: left; font-size: 14px; }
.shop-admin-table .data-table-row > div { min-width: 0; }
.data-table.shop-admin-table { overflow: visible; }
.shop-admin-date { display: block; font-size: 12px; color: var(--c-mute); }
.shop-admin-note { display: block; font-size: 12px; color: var(--c-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Actions : boutons-icônes communs (.icon-btn, core/admin-ui.js), emplacements fixes. */
.shop-admin-actions { display: grid; grid-template-columns: repeat(3, 34px); justify-content: end; align-items: center; gap: 6px; }
.shop-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--c-line);
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-deep);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
}
.shop-act:hover { border-color: var(--c-blue); color: var(--c-blue); }
.shop-act:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.shop-act:disabled { opacity: 0.6; cursor: default; }
.shop-act--primary { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.shop-act--primary:hover { background: var(--c-deep); border-color: var(--c-deep); color: #fff; }
.shop-act--danger { color: #A32D2D; border-color: rgba(163, 45, 45, 0.35); }
.shop-act--danger:hover { background: rgba(163, 45, 45, 0.06); border-color: #A32D2D; color: #A32D2D; }
.shop-admin-detail { padding: 6px 22px 20px 72px; background: var(--c-cream); border-bottom: 1px solid var(--c-line); }
.shop-admin-items { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.shop-admin-items th, .shop-admin-items td { padding: 7px 10px; border-bottom: 1px solid var(--c-line); text-align: left; }
.shop-admin-items th { font-size: 12px; color: var(--c-table-head-ink); background: var(--c-table-head); font-weight: 600; }
.shop-admin-items tbody tr:nth-child(even) { background: rgba(10, 31, 56, 0.035); }
.shop-admin-contact { margin: 8px 0 0; font-size: 13px; color: var(--c-mute); }
.shop-warn { color: #8a5a00; background: #FAEEDA; padding: 8px 12px; font-size: 14px; }

.shop-batches { display: flex; flex-direction: column; gap: 12px; }
.shop-batch {
  padding: 16px 20px 14px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-blue);
}
.shop-batch-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.shop-batch-title { display: flex; align-items: center; gap: 12px; }
.shop-batch h3 { margin: 0; font-size: 17px; color: var(--c-deep); }
.shop-batch-acts { grid-template-columns: repeat(4, 34px); }
.shop-batch-meta { margin: 8px 0 0; font-size: 13.5px; color: var(--c-mute); }
.shop-batch-meta strong { color: var(--c-deep); font-weight: 600; }
.shop-batch-meta .badge { margin-left: 2px; }
.shop-batch-note { margin: 6px 0 0; font-size: 13.5px; color: var(--c-ink); font-style: italic; }
.shop-batch-toggle { margin-top: 10px; padding: 0; font-size: 13px; }
.shop-batch-detail { margin-top: 12px; padding: 14px 16px; background: var(--c-cream); overflow-x: auto; }
.shop-batch-detail h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-deep); }
.shop-batch-detail table + h4 { margin-top: 18px; }
.shop-admin-items .is-center { text-align: center; }
.shop-admin-items .is-right { text-align: right; }
.shop-row-acts { display: inline-flex; gap: 6px; }
.shop-row-acts .icon-btn { width: 30px; height: 30px; }
.shop-batch-manual { margin: 12px 0 0; font-size: 13px; }
.shop-supplier-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.shop-supplier-form .shop-note { flex: 1; min-width: 260px; max-width: 520px; }
.shop-supplier-form input { padding: 10px 12px; border: 1px solid var(--c-line); font: inherit; font-size: 14px; background: #fff; }

/* Catalogue (admin) : message de la boutique, tableau, interrupteur « Visible ». */
.shop-notice-card { margin-bottom: 20px; padding: 14px 16px; background: var(--c-paper); border: 1px solid var(--c-line); }
.shop-notice-card label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--c-deep); }
.shop-notice-card label em { font-style: normal; font-size: 12.5px; color: var(--c-mute); }
.shop-notice-row { display: flex; gap: 12px; align-items: stretch; }
.shop-notice-row textarea { flex: 1; min-width: 0; resize: none; padding: 10px 12px; border: 1px solid var(--c-line); font: inherit; font-size: 14px; background: #fff; }
.shop-notice-row .shop-act { align-self: flex-end; }
.shop-catalog-table .data-table-row {
  grid-template-columns: 56px 84px minmax(0, 1.6fr) 104px 116px 120px 84px 72px 84px;
  gap: 14px;
  padding: 12px 20px;
}
.shop-catalog-row.is-inactive .c-img, .shop-catalog-row.is-inactive .c-name strong { opacity: 0.55; }
.shop-catalog-row .shop-line-img { width: 56px; height: 56px; flex: none; }
.shop-catalog-row .c-ref strong, .shop-catalog-row .c-name strong { color: var(--c-deep); font-weight: 600; }
.shop-catalog-row .c-price strong { font-family: var(--f-display); font-size: 17px; font-weight: 500; color: var(--c-blue); }
.shop-catalog-acts { grid-template-columns: repeat(2, 34px); }
.shop-opt { display: inline-block; margin: 2px; padding: 2px 7px; font-size: 11px; font-weight: 600; background: rgba(35, 111, 168, 0.1); color: var(--c-blue); }
/* Interrupteur Visible / Masqué. */
.shop-switch { position: relative; width: 42px; height: 24px; padding: 0; border: 0; border-radius: 12px; background: #C9D1DB; cursor: pointer; transition: background 0.2s var(--ease); vertical-align: middle; }
.shop-switch > span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(10, 31, 56, 0.3); transition: transform 0.2s var(--ease); }
.shop-switch[aria-checked="true"] { background: #0F9F70; }
.shop-switch[aria-checked="true"] > span { transform: translateX(18px); }
.shop-switch:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.shop-switch:disabled { opacity: 0.6; cursor: default; }
.shop-switch[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); right: 50%; transform: translate(50%, 3px);
  padding: 5px 9px; background: var(--c-deep); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s var(--ease), transform 0.15s var(--ease); z-index: 5;
}
.shop-switch[data-tip]:hover::after, .shop-switch[data-tip]:focus-visible::after { opacity: 1; transform: translate(50%, 0); }

.shop-pf { display: flex; flex-direction: column; gap: 16px; }
.shop-pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shop-pf-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--c-deep); }
.shop-pf-field { min-width: 0; }
.shop-pf-field.is-wide { grid-column: 1 / -1; }
.shop-pf-field.is-two { grid-column: span 2; }
.shop-pf-field input, .shop-pf-field select, .shop-pf-field textarea { width: 100%; box-sizing: border-box; min-width: 0; padding: 9px 11px; border: 1px solid var(--c-line); font: inherit; font-weight: 400; font-size: 14px; background: #fff; }
.shop-pf-field textarea { resize: none; }
.shop-pf-checks { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.shop-pf-checks input { accent-color: var(--c-blue); margin-right: 6px; }
.shop-pf-images { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.shop-pf-images legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--c-deep); }
.shop-pf-images legend em { font-style: normal; font-weight: 400; color: var(--c-mute); }
.shop-pf-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.shop-pf-thumb { margin: 0; width: 96px; border: 1px solid var(--c-line); background: #fff; }
.shop-pf-thumb img { width: 96px; height: 96px; object-fit: contain; display: block; }
.shop-pf-thumb figcaption { display: flex; justify-content: flex-end; gap: 4px; padding: 2px; border-top: 1px solid var(--c-line); }
.shop-pf-thumb button { border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--c-deep); padding: 2px 6px; }
.shop-pf-upload { align-self: flex-start; cursor: pointer; }
.shop-pf-images .shop-pf-thumbs > .shop-admin-date { margin: 0; }
/* Fiche article : onglets Article / Tailles & guide. */
/* Hauteur fixe sur grand écran : la fenêtre ne saute pas d'un onglet à l'autre
   (le corps défile). */
@media (min-width: 721px) { .shop-pf-modal .cac-modal-body { height: min(64vh, 600px); } }
.shop-pf-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.shop-pf-panel[hidden] { display: none; }
.shop-pf-help { margin: 0; font-size: 13.5px; color: var(--c-mute); line-height: 1.5; }
/* Tableau des tailles : une ligne par taille, une colonne par mesure ; il
   défile dans son cadre, la colonne « Taille » reste visible. */
.shop-sz-scroll { overflow-x: auto; border: 1px solid var(--c-line); background: #fff; }
.shop-sz-table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.shop-sz-table th, .shop-sz-table td { padding: 6px 8px; border-bottom: 1px solid var(--c-line); vertical-align: middle; text-align: center; }
.shop-sz-table thead th { background: var(--c-table-head); color: var(--c-table-head-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: top; }
.shop-sz-table tbody tr:nth-child(even) { background: rgba(10, 31, 56, 0.035); }
.shop-sz-table .shop-sz-name { position: sticky; left: 0; z-index: 1; text-align: left; background: inherit; }
.shop-sz-table thead .shop-sz-name { background: var(--c-table-head); padding-top: 12px; }
.shop-sz-table tbody .shop-sz-name { background: #fff; }
.shop-sz-table tbody tr:nth-child(even) .shop-sz-name { background: #F7F8FA; }
.shop-sz-table input, .shop-sz-table select { box-sizing: border-box; padding: 6px 7px; border: 1px solid var(--c-line); font: inherit; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; background: #fff; color: var(--c-ink); }
.shop-sz-table tbody .shop-sz-name input { width: 130px; font-weight: 600; }
.shop-sz-table td input { width: 70px; text-align: center; }
.shop-sz-measure { min-width: 160px; }
.shop-sz-measure > input { width: 100%; font-weight: 600; }
.shop-sz-measure-opts { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.shop-sz-measure-opts select { flex: 1; min-width: 0; padding: 4px 4px; font-size: 12px; }
.shop-sz-x { border: 1px solid transparent; background: none; cursor: pointer; color: var(--c-mute); font-size: 15px; line-height: 1; padding: 4px 6px; }
.shop-sz-x:hover:not(:disabled) { color: var(--c-blue); border-color: var(--c-line); }
.shop-sz-x[data-s-rm]:hover, .shop-sz-x[data-m-rm]:hover { color: #B3261E; }
.shop-sz-x:disabled { opacity: 0.3; cursor: default; }
.shop-sz-acts { white-space: nowrap; text-align: right !important; }
.shop-sz-empty { padding: 16px 10px !important; color: var(--c-mute); text-align: left !important; }
.shop-sz-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.shop-sz-meta { margin-top: 4px; }
/* Aperçu : le guide tel que l'adhérent le verra (sans retour ni choix de taille). */
.shop-sz-preview { border: 1px dashed var(--c-line); padding: 14px 18px 16px; background: var(--c-paper); }
.shop-sz-preview-label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-mute); }
.shop-sz-preview .shop-guide-back, .shop-sz-preview .shop-guide-hint, .shop-sz-preview .shop-guide-pick { display: none; }
.shop-sz-preview .shop-guide-table tr { cursor: default; }
.shop-sz-preview .shop-guide-table tr:hover { background: none; }
.shop-sz-preview .shop-guide-head h2 { font-size: 20px; }
.shop-sz-preview > div > p.shop-admin-date { margin: 0; }
@media (max-width: 520px) { .shop-sz-table tbody .shop-sz-name input { width: 84px; } .shop-sz-measure { min-width: 140px; } }


@media (max-width: 900px) {
  .shop-admin-table .data-table-row { grid-template-columns: 28px 1fr 1fr; }
  .shop-admin-table .data-table-head { display: none; }
  /* Téléphone / tablette : chaque commande devient une petite carte. */
  .shop-admin-table .data-table-row:not(.data-table-head) {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-areas: "sel order total" ". cust cust" ". pay status" "acts acts acts";
    gap: 8px 12px;
    padding: 14px 16px;
  }
  /* Prime sur la règle générique des tableaux mobiles (dashboard.css :
     chaque cellule en flex « space-between »). */
  .shop-admin-table .data-table-row:not(.data-table-head) > div { display: block; }
  .shop-admin-table .data-table-row:not(.data-table-head) > .c-qty { display: none; }
  .shop-admin-table .data-table-row:not(.data-table-head) > .c-pay { display: flex; justify-content: flex-start; }
  .shop-admin-table .data-table-row:not(.data-table-head) > .c-acts { display: grid; justify-content: end; }
  .shop-admin-table .c-sel { grid-area: sel; }
  .shop-admin-table .c-order { grid-area: order; }
  .shop-admin-table .c-total { grid-area: total; }
  .shop-admin-table .c-cust { grid-area: cust; }
  .shop-admin-table .c-pay { grid-area: pay; display: flex; align-items: center; gap: 8px; text-align: left; }
  .shop-admin-table .c-status { grid-area: status; text-align: right; }
  .shop-admin-table .c-qty { display: none; }
  .shop-admin-table .c-acts { grid-area: acts; justify-content: flex-end; }
  .shop-admin-table .c-pay .shop-admin-date { display: inline; }
  .shop-admin-detail { padding-left: 18px; overflow-x: auto; }
  .shop-pf-grid { grid-template-columns: 1fr 1fr; }
}

/* Formulaire article : une colonne sur téléphone (déclaré en dernier pour
   primer sur la règle ≤ 900 px). */
@media (max-width: 560px) {
  .shop-pf-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-pf-field.is-two { grid-column: auto; }
}

/* Catalogue sur téléphone / tablette : une carte par article. */
@media (max-width: 900px) {
  .shop-catalog-table .data-table-row:not(.data-table-head) {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "img name price" "img ref ref" "img cat cat" ". opts opts" "visible visible acts";
    gap: 6px 12px;
    padding: 14px 16px;
  }
  .shop-catalog-table .data-table-row:not(.data-table-head) > div { display: block; text-align: left; }
  .shop-catalog-table .c-img { grid-area: img; }
  .shop-catalog-table .c-name { grid-area: name; }
  .shop-catalog-table .c-price { grid-area: price; text-align: right; }
  .shop-catalog-table .c-ref { grid-area: ref; }
  .shop-catalog-table .c-ref strong, .shop-catalog-table .c-ref .shop-admin-date { display: inline; margin-right: 6px; }
  .shop-catalog-table .data-table-row:not(.data-table-head) > .c-cat { grid-area: cat; font-size: 13px; color: var(--c-mute); }
  .shop-catalog-table .data-table-row:not(.data-table-head) > .c-sizes { display: none; }
  .shop-catalog-table .c-opts { grid-area: opts; }
  .shop-catalog-table .c-visible { grid-area: visible; align-self: center; }
  .shop-catalog-table .data-table-row:not(.data-table-head) > .c-acts { grid-area: acts; display: grid; justify-content: end; }
  .shop-notice-row { flex-direction: column; }
}

/* Écrans tactiles : pas de survol → pas d'infobulle (elle restait affichée
   après un toucher et pouvait sortir de l'écran) ; le nom reste dans aria-label. */
@media (hover: none) {
  .shop-switch[data-tip]::after { display: none; }
}