/* Mes commandes (Mon compte), refonte du 15/10/2026.
   Mise en file sur les pages du compte par inc/account-ui.php (depuis le 21/10/2026).
   Tout part de #jdp-orders : l'identifiant gagne sur les règles de liens du contenu
   (.jdp-wp-content a:not(.jdp-btn)) et sur la feuille en ligne de smmplugin,
   quel que soit l'ordre dans lequel les feuilles arrivent. */
#jdp-orders {
  --o-ink: #1d1d1f;
  --o-ink-2: #6e6e73;
  --o-ink-3: #c7c7cc;
  --o-line: #e8e8ed;
  --o-line-strong: #d2d2d7;
  --o-tile: #f5f5f7;
  --o-hover: #fafafc;
  --o-accent: #E68A1C;
  --o-accent-hover: #F29A2E;
  --o-accent-ink: #b64400;
  --o-accent-soft: #fff3e3;
  --o-turq: #2baab1;
  --o-turq-ink: #1B7B80;
  --o-turq-soft: #E3F4F5;
  --o-green: #34A853;
  --o-green-ink: #1E7A3C;
  --o-green-soft: #E7F6EC;
  --o-ease: cubic-bezier(0.23, 1, 0.32, 1);
  container-type: inline-size;
  color: var(--o-ink);
  font-size: 15px;
  line-height: 1.5;
}
#jdp-orders *,
#jdp-orders *::before,
#jdp-orders *::after { box-sizing: border-box; }
#jdp-orders a { color: inherit; text-decoration: none; }
#jdp-orders a:focus-visible { outline: 2px solid var(--o-accent); outline-offset: 2px; }
#jdp-orders .jdp-orders__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Carte */
#jdp-orders .jdp-orders__card {
  border: 1px solid var(--o-line);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
#jdp-orders .jdp-orders__table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
  background: none;
}
#jdp-orders .jdp-orders__col--order-progress,
#jdp-orders .jdp-orders__col--order-status { width: 196px; }
#jdp-orders .jdp-orders__col--order-total { width: 112px; }
#jdp-orders .jdp-orders__col--order-actions { width: 216px; }

/* En-têtes : casse normale, petits, gris */
#jdp-orders .jdp-orders__table thead th {
  padding: 14px 16px 12px;
  border: 0;
  border-bottom: 1px solid var(--o-line);
  background: none;
  color: var(--o-ink-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}
#jdp-orders .jdp-orders__table thead .jdp-orders__th--order-total { text-align: right; }

/* Lignes */
#jdp-orders .jdp-orders__row { position: relative; }
#jdp-orders .jdp-orders__row > th,
#jdp-orders .jdp-orders__row > td {
  padding: 16px;
  border: 0;
  border-bottom: 1px solid var(--o-line);
  background: none;
  color: var(--o-ink);
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
  transition: background-color 150ms ease;
}
#jdp-orders .jdp-orders__row:last-child > th,
#jdp-orders .jdp-orders__row:last-child > td { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  #jdp-orders .jdp-orders__row:hover > th,
  #jdp-orders .jdp-orders__row:hover > td { background: var(--o-hover); }
  #jdp-orders .jdp-orders__row:hover .jdp-orders__chev { color: var(--o-ink-2); }
}

/* Colonne Commande : vignette du réseau, service, numéro et date */
#jdp-orders .jdp-orders__link { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* Toute la ligne ouvre la commande : le lien s'étire sur la ligne. Réservé aux
   navigateurs qui ont les requêtes de conteneur, qui savent tous positionner un <tr>. */
@supports (container-type: inline-size) {
  #jdp-orders .jdp-orders__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
  #jdp-orders .jdp-orders__link:focus-visible { outline: none; }
  #jdp-orders .jdp-orders__link:focus-visible::after { outline: 2px solid var(--o-accent); outline-offset: -3px; border-radius: 12px; }
}
#jdp-orders .jdp-orders__tile {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--o-tile);
  color: var(--o-ink-2);
}
#jdp-orders .jdp-orders__tile svg { display: block; width: 22px; height: 22px; }
#jdp-orders .jdp-orders__tile--tiktok { color: #111; }
#jdp-orders .jdp-orders__tile--facebook { color: #1877F2; }
#jdp-orders .jdp-orders__tile--youtube { color: #FF0000; }
#jdp-orders .jdp-orders__tile--twitter { color: #0F172A; }
#jdp-orders .jdp-orders__tile--spotify { color: #1DB954; }
#jdp-orders .jdp-orders__tile--twitch { color: #9146FF; }
#jdp-orders .jdp-orders__text { display: grid; min-width: 0; }
#jdp-orders .jdp-orders__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
}
#jdp-orders .jdp-orders__more { font-weight: 500; color: var(--o-ink-2); white-space: nowrap; }
#jdp-orders .jdp-orders__meta { font-size: 13px; color: var(--o-ink-2); font-variant-numeric: tabular-nums; }

/* Pastilles : couleur et mot, jamais la couleur seule.
   Celles du thème (.jdp-orders__pill) et celles de smmplugin (.smmp-op__pill) parlent la même langue :
   orange = à payer, turquoise = en cours, vert = livré ou terminé, gris = annulé ou en attente d'envoi. */
#jdp-orders .jdp-orders__pill,
#jdp-orders .smmp-op__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  max-width: 100%;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  /* Un libellé long (« Finalisation par notre équipe ») passe sur deux lignes au lieu de déborder. */
  white-space: normal;
}
#jdp-orders .jdp-orders__dot,
#jdp-orders .smmp-op__pill-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
#jdp-orders .jdp-orders__pill--pay { background: var(--o-accent-soft); color: var(--o-accent-ink); }
#jdp-orders .jdp-orders__pill--pay .jdp-orders__dot { background: var(--o-accent); }
#jdp-orders .jdp-orders__pill--run,
#jdp-orders .smmp-op-col .smmp-op__pill--run,
#jdp-orders .smmp-op-col .smmp-op__pill--team { background: var(--o-turq-soft); color: var(--o-turq-ink); }
#jdp-orders .jdp-orders__pill--run .jdp-orders__dot,
#jdp-orders .smmp-op-col .smmp-op__pill--run .smmp-op__pill-dot,
#jdp-orders .smmp-op-col .smmp-op__pill--team .smmp-op__pill-dot { background: var(--o-turq); }
#jdp-orders .jdp-orders__pill--done,
#jdp-orders .smmp-op-col .smmp-op__pill--done { background: var(--o-green-soft); color: var(--o-green-ink); }
#jdp-orders .jdp-orders__pill--done .jdp-orders__dot,
#jdp-orders .smmp-op-col .smmp-op__pill--done .smmp-op__pill-dot { background: var(--o-green); }
#jdp-orders .jdp-orders__pill--off,
#jdp-orders .smmp-op-col .smmp-op__pill--wait { background: var(--o-tile); color: var(--o-ink-2); }
#jdp-orders .jdp-orders__pill--off .jdp-orders__dot,
#jdp-orders .smmp-op-col .smmp-op__pill--wait .smmp-op__pill-dot { background: #aeaeb2; }

/* Colonne Avancement de smmplugin : pastille, puis « N livré sur M » dessous */
#jdp-orders .smmp-op-col { display: grid; gap: 6px; }
#jdp-orders .smmp-op-col__segs { max-width: 140px; }
#jdp-orders .smmp-op-col__seg { height: 4px; border-radius: 2px; }
#jdp-orders .smmp-op-col__seg--ok { background: var(--o-green); }
#jdp-orders .smmp-op-col__seg--run { background: var(--o-turq); }
#jdp-orders .smmp-op-col__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding-left: 2px;
  font-size: 12px;
  color: var(--o-ink-2);
  font-variant-numeric: tabular-nums;
}
#jdp-orders .smmp-op-col__label .smmp-op__pill { margin-left: -2px; }

/* Total : chiffres tabulaires alignés à droite */
#jdp-orders .jdp-orders__row > .jdp-orders__cell--order-total { text-align: right; }
#jdp-orders .jdp-orders__amount { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
#jdp-orders .jdp-orders__amount .woocommerce-Price-amount { white-space: nowrap; }
/* Commande remboursée : WooCommerce rend « <del>ancien</del> <ins>nouveau</ins> », l'ancien passe au-dessus, en petit. */
#jdp-orders .jdp-orders__amount del { display: block; font-size: 13px; font-weight: 400; color: var(--o-ink-2); white-space: nowrap; }
#jdp-orders .jdp-orders__amount ins { text-decoration: none; }
#jdp-orders .jdp-orders__items { display: block; font-size: 13px; color: var(--o-ink-2); }

/* Commandes annulées ou remboursées : lisibles, en retrait */
#jdp-orders .jdp-orders__row[data-dim] .jdp-orders__tile svg { filter: grayscale(1); opacity: .45; }
#jdp-orders .jdp-orders__row[data-dim] .jdp-orders__name,
#jdp-orders .jdp-orders__row[data-dim] .jdp-orders__amount { color: var(--o-ink-2); font-weight: 500; }

/* Actions : un seul bouton fort (Payer), le reste discret */
#jdp-orders .jdp-orders__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  /* Seuls les boutons arrêtent le clic : le reste de la cellule, chevron compris, laisse passer
     jusqu'au lien étiré de la ligne. */
  pointer-events: none;
}
#jdp-orders .jdp-orders__actions > a { pointer-events: auto; }
#jdp-orders .jdp-orders__chev,
#jdp-orders .smmp-op-col { pointer-events: none; }
#jdp-orders .jdp-orders__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #424245;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--o-ease), background-color 150ms ease, color 150ms ease;
}
#jdp-orders .jdp-orders__btn:active { transform: scale(0.97); }
#jdp-orders .jdp-orders__btn svg { width: 16px; height: 16px; flex-shrink: 0; }
#jdp-orders .jdp-orders__btn--pay { padding: 0 20px; background: var(--o-accent); color: var(--o-ink); font-weight: 600; }
#jdp-orders .jdp-orders__btn--ghost { height: 40px; padding: 0 18px; border: 1px solid var(--o-line-strong); background: #fff; color: var(--o-ink); }
@media (hover: hover) and (pointer: fine) {
  #jdp-orders .jdp-orders__btn--pay:hover { background: var(--o-accent-hover); }
  #jdp-orders .jdp-orders__btn--quiet:hover { background: var(--o-tile); color: var(--o-ink); }
  #jdp-orders .jdp-orders__btn--ghost:hover { background: var(--o-tile); }
}
#jdp-orders .jdp-orders__chev {
  display: inline-flex;
  justify-content: flex-end;
  width: 16px;
  color: var(--o-ink-3);
  transition: color 150ms ease;
}
#jdp-orders .jdp-orders__chev svg { width: 16px; height: 16px; }
#jdp-orders .jdp-orders__chev--m { display: none; }

/* Pagination */
#jdp-orders .jdp-orders__pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
#jdp-orders .jdp-orders__page { font-size: 13px; color: var(--o-ink-2); }
#jdp-orders .jdp-orders__pager-links { display: flex; flex-wrap: wrap; gap: 8px; }
#jdp-orders .jdp-orders__btn--prev svg { transform: scaleX(-1); }

/* Entrée de la liste, une seule fois à l'ouverture de la page */
#jdp-orders .jdp-orders__row { animation: jdp-orders-rise 420ms var(--o-ease) both; }
#jdp-orders .jdp-orders__row:nth-child(2) { animation-delay: 30ms; }
#jdp-orders .jdp-orders__row:nth-child(3) { animation-delay: 60ms; }
#jdp-orders .jdp-orders__row:nth-child(4) { animation-delay: 90ms; }
#jdp-orders .jdp-orders__row:nth-child(5) { animation-delay: 120ms; }
#jdp-orders .jdp-orders__row:nth-child(6) { animation-delay: 150ms; }
#jdp-orders .jdp-orders__row:nth-child(7) { animation-delay: 180ms; }
#jdp-orders .jdp-orders__row:nth-child(8) { animation-delay: 210ms; }
#jdp-orders .jdp-orders__row:nth-child(9) { animation-delay: 240ms; }
#jdp-orders .jdp-orders__row:nth-child(n+10) { animation-delay: 270ms; }
@keyframes jdp-orders-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Largeur moyenne (entre la carte et les 840 px du bureau) : colonnes et marges resserrées, chevron
   masqué (la ligne reste cliquable), pour que Payer et Annuler tiennent sans être coupés. */
@container (width > 760px) and (width < 840px) {
  #jdp-orders .jdp-orders__table thead th,
  #jdp-orders .jdp-orders__table .jdp-orders__row > th,
  #jdp-orders .jdp-orders__table .jdp-orders__row > td { padding-left: 12px; padding-right: 12px; }
  #jdp-orders .jdp-orders__table .jdp-orders__col--order-progress,
  #jdp-orders .jdp-orders__table .jdp-orders__col--order-status { width: 188px; }
  #jdp-orders .jdp-orders__table .jdp-orders__col--order-total { width: 100px; }
  #jdp-orders .jdp-orders__table .jdp-orders__col--order-actions { width: 184px; }
  #jdp-orders .jdp-orders__table .jdp-orders__link { gap: 12px; }
  #jdp-orders .jdp-orders__table .jdp-orders__chev--d { display: none; }
  #jdp-orders .jdp-orders__table .jdp-orders__btn--pay { padding: 0 16px; }
  #jdp-orders .jdp-orders__table .jdp-orders__btn--quiet { padding: 0 10px; }
}

/* Liste étroite (téléphone, ou colonne de contenu serrée) : chaque commande devient une carte */
@container (max-width: 760px) {
  #jdp-orders .jdp-orders__table,
  #jdp-orders .jdp-orders__table tbody { display: block; }
  #jdp-orders .jdp-orders__table thead,
  #jdp-orders .jdp-orders__table colgroup { display: none; }
  #jdp-orders .jdp-orders__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "order order" "status total" "actions actions";
    gap: 14px 12px;
    padding: 16px;
    border-bottom: 1px solid var(--o-line);
  }
  #jdp-orders .jdp-orders__row:last-child { border-bottom: 0; }
  #jdp-orders .jdp-orders__row > th,
  #jdp-orders .jdp-orders__row > td { display: block; padding: 0; border: 0; background: none; }
  /* Survol : toute la carte s'éclaire d'un bloc, pas chaque cellule séparément. */
  @media (hover: hover) and (pointer: fine) {
    #jdp-orders .jdp-orders__table .jdp-orders__row:hover > th,
    #jdp-orders .jdp-orders__table .jdp-orders__row:hover > td { background: none; }
    #jdp-orders .jdp-orders__table .jdp-orders__row:hover { background: var(--o-hover); }
  }
  #jdp-orders .jdp-orders__cell--order-number { grid-area: order; }
  #jdp-orders .jdp-orders__cell--order-progress,
  #jdp-orders .jdp-orders__cell--order-status { grid-area: status; align-self: center; }
  #jdp-orders .jdp-orders__row > .jdp-orders__cell--order-total { grid-area: total; align-self: center; }
  #jdp-orders .jdp-orders__cell--order-actions { grid-area: actions; }
  #jdp-orders .jdp-orders__cell--order-actions:not(:has(.jdp-orders__btn)) { display: none; }
  #jdp-orders .jdp-orders__row:not(:has(.jdp-orders__btn)) { grid-template-areas: "order order" "status total"; }
  #jdp-orders .jdp-orders__link { padding-right: 24px; }
  #jdp-orders .jdp-orders__chev--d { display: none; }
  #jdp-orders .jdp-orders__chev--m { display: inline-flex; position: absolute; top: 30px; right: 16px; }
  #jdp-orders .jdp-orders__actions { justify-content: flex-start; gap: 8px; }
  #jdp-orders .jdp-orders__btn { height: 44px; }
  #jdp-orders .jdp-orders__btn--pay { flex: 1; }
  #jdp-orders .jdp-orders__btn--quiet { background: var(--o-tile); }
  #jdp-orders .smmp-op-col__label { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  #jdp-orders .jdp-orders__pager { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  #jdp-orders .jdp-orders__pager-links { flex-direction: column; }
  #jdp-orders .jdp-orders__btn--ghost { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  #jdp-orders .jdp-orders__row { animation: none; }
  #jdp-orders .jdp-orders__btn:active { transform: none; }
}