/* MyPopMee — « Mes créations » (parcours V2). DA blanche et premium : jetons
   repris de mpm-da.css (ivoire, encre, cacao, or), halo cacao/or au survol sans
   soulignement (règle MYPOPMEE_UX_HOVER_GLOW), focus clavier visible. */
.mpmc {
  --mpmc-ivory: #FAF7F2; --mpmc-paper: #FFFDF9; --mpmc-linen: #F4E9DE; --mpmc-line: #E6D9CE;
  --mpmc-ink: #342A25; --mpmc-ink-soft: #5E5049; --mpmc-muted: #75675E;
  --mpmc-accent: #80583E; --mpmc-accent-dark: #694530; --mpmc-gold: #9D6C4D;
  --mpmc-serif: Georgia, "Times New Roman", serif;
  --mpmc-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mpmc-radius: 20px;
  box-sizing: border-box; width: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(20px, 4vw, 40px) clamp(16px, 4.5vw, 40px);
  background: var(--mpmc-paper); border: 1px solid var(--mpmc-line); border-radius: var(--mpmc-radius);
  color: var(--mpmc-ink); font-family: var(--mpmc-sans); font-size: 15px; line-height: 1.55;
}
.mpmc *, .mpmc *::before, .mpmc *::after { box-sizing: border-box; }
.mpmc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.mpmc-eyebrow { margin: 0 0 4px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mpmc-gold); }
.mpmc-h2 { margin: 0; font-family: var(--mpmc-serif); font-weight: 400; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; color: var(--mpmc-ink); }
.mpmc-quota { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px; border-radius: 999px; background: var(--mpmc-linen); color: var(--mpmc-accent-dark); font-size: 13px; font-weight: 600; }
.mpmc-quota.is-empty { background: #F3E7E1; color: var(--mpmc-ink-soft); }
.mpmc-invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 24px; padding: 16px 18px; background: var(--mpmc-ivory); border: 1px solid var(--mpmc-line); border-radius: 14px; color: var(--mpmc-ink-soft); }
.mpmc-invite p { margin: 0; flex: 1 1 320px; }
.mpmc-invite-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mpmc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(14px, 2vw, 22px); }
.mpmc-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--mpmc-line); border-radius: 16px; transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease; }
.mpmc-card, .mpmc-card * { text-decoration: none !important; }
@media (hover: hover) and (pointer: fine) {
  .mpmc-card:hover { border-color: #BA865F; box-shadow: 0 0 0 1px rgba(174, 111, 70, .48), 0 0 20px rgba(221, 155, 94, .38), 0 16px 35px rgba(80, 52, 33, .16); transform: translateY(-2px); }
}
.mpmc-card:focus-within { border-color: #BA865F; box-shadow: 0 0 0 1px rgba(174, 111, 70, .48), 0 0 18px rgba(221, 155, 94, .28); }
.mpmc-media { position: relative; aspect-ratio: 2 / 3; background: linear-gradient(180deg, #fff, var(--mpmc-ivory)); }
.mpmc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s ease; }
.mpmc-card.is-loaded .mpmc-media img { opacity: 1; }
.mpmc-card.is-missing .mpmc-media::after { content: "Aperçu archivé"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--mpmc-muted); font-size: 13px; }
.mpmc-badge { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255, 253, 249, .94); color: var(--mpmc-ink-soft); border: 1px solid var(--mpmc-line); backdrop-filter: blur(4px); }
.mpmc-badge.is-approved { color: var(--mpmc-accent-dark); border-color: #D9BFA8; }
.mpmc-badge.is-ordered { background: var(--mpmc-accent); border-color: var(--mpmc-accent); color: #fff; }
.mpmc-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.mpmc-title { margin: 0; font-family: var(--mpmc-serif); font-weight: 400; font-size: 20px; color: var(--mpmc-ink); }
.mpmc-meta { margin: 0; color: var(--mpmc-ink-soft); font-size: 14px; }
.mpmc-date, .mpmc-expiry { margin: 0; color: var(--mpmc-muted); font-size: 13px; }
.mpmc-actions { margin-top: auto; padding-top: 12px; }
.mpmc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid transparent; font: 600 14px/1.2 var(--mpmc-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif); cursor: pointer; text-decoration: none !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.mpmc-actions .mpmc-btn { width: 100%; }
.mpmc-btn--primary { background: var(--mpmc-accent, #80583E); color: #fff; }
.mpmc-btn--primary:hover { background: var(--mpmc-accent-dark, #694530); }
.mpmc-btn--ghost { background: #fff; color: var(--mpmc-accent-dark, #694530); border-color: #D9BFA8; }
.mpmc-btn--ghost:hover { border-color: var(--mpmc-accent); }
.mpmc-btn--danger { background: #8A3B2E; color: #fff; }
.mpmc-btn:focus-visible, .mpmc-link:focus-visible, .mpmc-consent input:focus-visible { outline: 2px solid var(--mpmc-accent); outline-offset: 3px; }
.mpmc-dev { border-style: dashed; }
.mpmc-empty, .mpmc-error { margin: 8px 0 0; padding: 28px; text-align: center; color: var(--mpmc-muted); background: var(--mpmc-ivory); border-radius: 14px; }
.mpmc-error { color: #8A3B2E; }
.mpmc-notice { margin: 8px 0 0; padding: 12px 16px; color: var(--mpmc-ink); background: var(--mpmc-ivory); border: 1px solid var(--mpmc-line); border-radius: 12px; font-size: 14px; }
.mpmc-btn:disabled { opacity: .55; cursor: progress; }
.mpmc-skeleton { min-height: 360px; background: linear-gradient(100deg, var(--mpmc-ivory) 30%, #fff 50%, var(--mpmc-ivory) 70%) 0 0 / 300% 100%; animation: mpmc-shimmer 1.4s ease-in-out infinite; }
@keyframes mpmc-shimmer { to { background-position: -100% 0; } }
.mpmc-account { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--mpmc-line); display: flex; flex-direction: column; gap: 14px; }
.mpmc-consent { display: flex; gap: 12px; align-items: flex-start; color: var(--mpmc-ink-soft); font-size: 14px; cursor: pointer; }
.mpmc-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--mpmc-accent); flex: none; }
.mpmc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 13px; }
.mpmc-confirm-text { flex: 1 1 100%; color: var(--mpmc-ink-soft); }
.mpmc-link { background: none; border: 0; padding: 6px 0; color: var(--mpmc-muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mpmc-link:hover { color: var(--mpmc-accent-dark); }
.mpmc-overlay { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px; background: rgba(52, 42, 37, .42); animation: mpmc-fade .2s ease; }
.mpmc-dialog { width: min(480px, 100%); padding: 28px; background: var(--mpmc-paper, #FFFDF9); border-radius: 20px; box-shadow: 0 24px 60px rgba(52, 42, 37, .25); color: #342A25; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; line-height: 1.55; }
.mpmc-dialog .mpmc-h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 28px; margin: 0 0 10px; }
.mpmc-dialog p { margin: 0 0 10px; color: #5E5049; }
.mpmc-dialog .mpmc-note { font-size: 13px; color: #75675E; }
.mpmc-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mpmc-dialog .mpmc-btn { flex: 1 1 200px; }
.mpmc-dialog .mpmc-btn--primary { background: #80583E; color: #fff; }
.mpmc-dialog .mpmc-btn--ghost { background: #fff; color: #694530; border: 1px solid #D9BFA8; }
@keyframes mpmc-fade { from { opacity: 0; } }
/* Suivi des commandes : étapes confirmées par Shopify, l'atelier ou le transporteur. */
.mpmc-track-inline { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--mpmc-accent-dark); }
.mpmc-orders { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--mpmc-line); display: flex; flex-direction: column; gap: 14px; }
.mpmc-h3 { margin: 0; font-family: var(--mpmc-serif); font-weight: 400; font-size: 24px; color: var(--mpmc-ink); }
.mpmc-orders-note { margin: -6px 0 4px; color: var(--mpmc-muted); font-size: 13px; }
.mpmc-order { background: #fff; border: 1px solid var(--mpmc-line); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.mpmc-order-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; }
.mpmc-order-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mpmc-order-name strong { font-size: 15px; color: var(--mpmc-ink); }
.mpmc-order-name span { font-size: 13px; color: var(--mpmc-ink-soft); overflow-wrap: anywhere; }
.mpmc-order-state { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--mpmc-linen); color: var(--mpmc-accent-dark); white-space: nowrap; }
.mpmc-order-state.is-livraison { background: #E7F1E4; color: #2F5A2A; }
.mpmc-order-state.is-annulee, .mpmc-order-state.is-paiement_en_attente { background: #F3E7E1; color: var(--mpmc-ink-soft); }
.mpmc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.mpmc-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 4px; color: var(--mpmc-muted); font-size: 12.5px; }
.mpmc-step::before { content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: var(--mpmc-line); z-index: 0; }
.mpmc-step:first-child::before { display: none; }
.mpmc-step.is-done::before { background: var(--mpmc-accent); }
.mpmc-step-dot { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--mpmc-line); }
.mpmc-step.is-done .mpmc-step-dot { background: var(--mpmc-accent); border-color: var(--mpmc-accent); }
.mpmc-step.is-current .mpmc-step-dot { box-shadow: 0 0 0 4px rgba(157, 108, 77, .2); }
.mpmc-step-text { display: flex; flex-direction: column; gap: 2px; }
.mpmc-step.is-done .mpmc-step-label { color: var(--mpmc-ink); font-weight: 600; }
.mpmc-step-date { font-size: 11.5px; color: var(--mpmc-muted); }
.mpmc-order-tracking { margin: 0; font-size: 13px; color: var(--mpmc-ink-soft); overflow-wrap: anywhere; }
.mpmc-order-tracking a { color: var(--mpmc-accent-dark); font-weight: 600; text-decoration: none; }
.mpmc-order-tracking a:focus-visible { outline: 2px solid var(--mpmc-gold); outline-offset: 2px; }
@media (max-width: 560px) {
  .mpmc-steps { grid-template-columns: 1fr; gap: 10px; }
  .mpmc-step { flex-direction: row; text-align: left; gap: 12px; padding: 0; }
  .mpmc-step::before { top: -10px; left: 7px; width: 2px; height: 10px; }
  .mpmc-step-dot { flex: none; }
  .mpmc-step-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
}
@media (max-width: 560px) {
  .mpmc { border-radius: 16px; }
  .mpmc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mpmc-body { padding: 10px 12px 12px; }
  .mpmc-title { font-size: 17px; }
  .mpmc-meta { font-size: 13px; }
  .mpmc-btn { min-height: 44px; padding: 10px 12px; font-size: 13px; }
  .mpmc-invite-actions, .mpmc-invite-actions .mpmc-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mpmc-card, .mpmc-media img, .mpmc-overlay { transition: none; animation: none; }
  .mpmc-card:hover { transform: none; }
  .mpmc-skeleton { animation: none; }
}