/* Suivi de commande en direct (smmplugin 4.12.0) : bloc .smmp-op, colonne .smmp-op-col, FAQ .smmp-faq.
   Recopiée en ligne dans le bloc par Smmp_Order_Progress::inline_style() (voir le commentaire du <style>).
   Couleurs surchargeables par le thème via --smmp-op-*, police héritée (Poppins). */
.smmp-op,
.smmp-op-col,
.smmp-faq,
.woocommerce-order-details {
  --_ink: var(--smmp-op-ink, #2F333B);
  --_ink-2: var(--smmp-op-ink-2, #69727D);
  --_ink-3: var(--smmp-op-ink-3, #A5ADB8);
  --_line: var(--smmp-op-line, #E9E6ED);
  --_track: var(--smmp-op-track, #EEEDF2);
  --_card: var(--smmp-op-card, #FFFFFF);
  --_soft: var(--smmp-op-soft, #FBFBFC);
  /* 4.12.3 : style Apple, choix de Sofian du 15/10/2026 : aucun doré, bouton d'action en pilule noire,
     liens et focus en encre. */
  --_action: var(--smmp-op-action, #1d1d1f);
  --_action-hover: var(--smmp-op-action-hover, #3a3a3c);
  --_link: var(--smmp-op-link, #1d1d1f);
  --_turq: var(--smmp-op-turq, #2baab1);
  --_turq-ink: var(--smmp-op-turq-ink, #1B7B80);
  --_turq-soft: var(--smmp-op-turq-soft, #E3F4F5);
  --_green: var(--smmp-op-green, #34A853);
  --_green-ink: var(--smmp-op-green-ink, #1E7A3C);
  --_green-soft: var(--smmp-op-green-soft, #E7F6EC);
  --_white: var(--smmp-op-white, #FDFDFE);
  --_ease: cubic-bezier(0.23, 1, 0.32, 1);
  color: var(--_ink);
  font-family: inherit;
}
.smmp-op *,
.smmp-op-col *,
.smmp-faq * { box-sizing: border-box; }

/* Carte */
.smmp-op {
  margin: 0 0 32px;
  border: 1px solid var(--_line);
  border-radius: 20px;
  background: var(--_card);
  overflow: hidden;
  font-size: 15px;
  line-height: 1.55;
}
.smmp-op__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 18px 22px;
  background: var(--_soft);
  border-bottom: 1px solid var(--_line);
}
.smmp-op__head-text { min-width: 0; }
.smmp-op .smmp-op__title {
  margin: 0;
  color: var(--_ink);
  font-size: var(--fs-h3, 22px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.smmp-op__sub { margin: 4px 0 0; font-size: 13px; color: var(--_ink-2); }
.smmp-op__refresh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.smmp-op__updated { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--_ink-2); }
.smmp-op__updated:empty { display: none; }
.smmp-op__live { width: 8px; height: 8px; border-radius: 50%; background: var(--_turq); box-shadow: 0 0 0 3px var(--_turq-soft); }

/* Bouton Actualiser : remise à zéro des styles de bouton du thème, puis retour au toucher */
.smmp-op .smmp-op__btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-height: 36px;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid var(--_line);
  border-radius: 8px;
  background: var(--_card);
  box-shadow: none;
  color: var(--_ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: border-color 150ms ease, transform 160ms var(--_ease);
}
.smmp-op .smmp-op__btn[hidden] { display: none; }
.smmp-op .smmp-op__btn:hover,
.smmp-op .smmp-op__btn:focus { background: var(--_card); color: var(--_ink); }
@media (hover: hover) and (pointer: fine) {
  .smmp-op .smmp-op__btn:hover { border-color: var(--_ink-3); }
}
.smmp-op .smmp-op__btn:active { transform: scale(0.97); }
.smmp-op .smmp-op__btn:focus-visible { outline: 2px solid var(--_link); outline-offset: 2px; }
.smmp-op .smmp-op__btn:disabled,
.smmp-op .smmp-op__btn[aria-disabled="true"] { cursor: progress; }
.smmp-op__btn svg { width: 14px; height: 14px; flex: none; }
.smmp-op__btn.is-loading svg { animation: smmp-op-spin 700ms linear infinite; }
@keyframes smmp-op-spin { to { transform: rotate(360deg); } }

/* Articles */
.smmp-op__lines { display: grid; }
.smmp-op__lines[aria-busy="true"] { cursor: progress; }
.smmp-op__line {
  display: grid;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--_line);
}
.smmp-op__line:last-child { border-bottom: 0; }
.smmp-op__line-top { display: flex; align-items: flex-start; gap: 14px; }
.smmp-op__tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--_ink);
  color: var(--_white);
}
/* Seul dégradé admis par la charte : l'icône Instagram officielle. */
.smmp-op__tile--instagram { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.smmp-op__tile--tiktok { background: #1F1F1F; }
.smmp-op__tile--facebook { background: #1877F2; }
.smmp-op__tile svg { width: 22px; height: 22px; }
.smmp-op__line-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.smmp-op__line-title strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.smmp-op__line-title span { font-size: 13px; color: var(--_ink-2); overflow-wrap: anywhere; }

/* Pastilles */
.smmp-op__pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.smmp-op__pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.smmp-op__pill--wait { background: var(--_track); color: var(--_ink); }
/* États : turquoise = en cours, vert = livré, partout (liste Mon compte comprise). Bouton d'action en noir, liens et focus en encre, aucun doré (4.12.3). */
.smmp-op__pill--run { background: var(--_turq-soft); color: var(--_turq-ink); }
.smmp-op__pill--run .smmp-op__pill-dot { animation: smmp-op-pulse 1.6s ease-in-out infinite; }
.smmp-op__pill--done { background: var(--_green-soft); color: var(--_green-ink); }
.smmp-op__pill--team { background: var(--_turq-soft); color: var(--_turq-ink); }
@keyframes smmp-op-pulse { 50% { opacity: 0.35; } }

/* Barre : largeur bornée à 100 %, l'écart entre deux relevés glisse en 600 ms */
.smmp-op__progress { display: grid; gap: 6px; }
.smmp-op__bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--_track);
  overflow: hidden;
}
.smmp-op__bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 100%;
  border-radius: inherit;
  background: var(--_turq);
  /* Glisse depuis la gauche : seul transform s'anime (pas de recalcul de mise en page), et le bout
     arrondi reste net, ce que scaleX écraserait. --p vient du rendu serveur et du JS. */
  transform: translateX(calc(var(--p, 0%) - 100%));
  transition: transform 600ms var(--_ease), background-color 200ms ease;
}
.smmp-op__bar--done > i { background: var(--_green); }
.smmp-op__bar--thin { height: 6px; }
.smmp-op__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 13px;
  color: var(--_ink-2);
  font-variant-numeric: tabular-nums;
}
.smmp-op__legend b { color: var(--_ink); font-weight: 600; }
.smmp-op__bonus { margin-left: 4px; color: var(--_turq-ink); font-weight: 600; white-space: nowrap; }

/* Publications d'un même article */
.smmp-op__parts { display: grid; gap: 10px; }
.smmp-op__part { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.smmp-op__part-main { display: grid; gap: 4px; min-width: 0; }
.smmp-op__part-name { font-size: 13px; font-weight: 500; }
.smmp-op__part-meta { font-size: 12px; color: var(--_ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Au départ, Objectif */
.smmp-op__facts { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.smmp-op__fact {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--_line);
  border-radius: 8px;
  background: var(--_soft);
  font-size: 13px;
  color: var(--_ink-2);
}
.smmp-op__fact b { color: var(--_ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.smmp-op__msg { margin: 0; font-size: 13px; color: var(--_ink-2); }
.smmp-op .smmp-op__contact,
.smmp-faq .smmp-op__contact {
  color: var(--_link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 4px;
}
.smmp-op .smmp-op__contact:focus-visible,
.smmp-faq .smmp-op__contact:focus-visible { outline: 2px solid var(--_link); outline-offset: 2px; }

/* Demander une recharge (4.12.3) : pilule noire, texte blanc (16:1), grisée tant qu'elle n'est pas disponible.
   La confirmation reprend le turquoise des états en cours. */
.smmp-op__refill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-top: 14px;
  border-top: 1px solid var(--_line);
}
.smmp-op .smmp-op__btn--refill {
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--_action);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 150ms ease, transform 160ms var(--_ease);
}
.smmp-op .smmp-op__btn--refill:hover,
.smmp-op .smmp-op__btn--refill:focus { background: var(--_action); color: #ffffff; }
@media (hover: hover) and (pointer: fine) {
  .smmp-op .smmp-op__btn--refill:hover { background: var(--_action-hover); }
}
.smmp-op .smmp-op__btn--refill.is-loading { opacity: 0.7; }
.smmp-op .smmp-op__btn--refill:disabled,
.smmp-op .smmp-op__btn--refill:disabled:hover {
  background: var(--_track);
  color: var(--_ink-2);
  cursor: default;
}
.smmp-op .smmp-op__btn--refill:disabled:active { transform: none; }
.smmp-op__refill-note { margin: 0; font-size: 13px; color: var(--_ink-2); }
.smmp-op__refill-done {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--_turq-ink);
}
.smmp-op__refill-done svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.smmp-op__refill-done:focus { outline: none; }
.smmp-op__refill-done:focus-visible { outline: 2px solid var(--_link); outline-offset: 2px; border-radius: 4px; }

/* Étapes */
.smmp-op__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.smmp-op__steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.smmp-op__step { position: relative; display: grid; align-content: start; justify-items: start; gap: 4px; margin: 0; padding: 0 8px 0 0; }
.smmp-op__step::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 20px;
  right: 0;
  height: 2px;
  background: var(--_line);
  transition: background-color 200ms ease;
}
.smmp-op__step:last-child::before { display: none; }
.smmp-op__step--ok::before { background: var(--_green); }
.smmp-op__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--_line);
  border-radius: 50%;
  background: var(--_card);
  color: var(--_white);
  transition: background-color 200ms ease, border-color 200ms ease;
}
.smmp-op__dot svg { width: 11px; height: 11px; }
.smmp-op__step--ok .smmp-op__dot { background: var(--_green); border-color: var(--_green); }
.smmp-op__step--now .smmp-op__dot { border-color: var(--_turq); box-shadow: 0 0 0 4px var(--_turq-soft); }
.smmp-op__step--now .smmp-op__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--_turq); }
.smmp-op__step-label { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--_ink); }
.smmp-op__step--todo .smmp-op__step-label { color: var(--_ink-2); font-weight: 500; }
.smmp-op__step-time { font-size: 11px; color: var(--_ink-2); font-variant-numeric: tabular-nums; }

/* Mes commandes : colonne Avancement */
.smmp-op-col { display: grid; gap: 6px; min-width: 0; }
.smmp-op-col__segs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; max-width: 160px; }
.smmp-op-col__seg { display: block; height: 6px; border-radius: 3px; background: var(--_track); }
.smmp-op-col__seg--ok { background: var(--_green); }
.smmp-op-col__seg--run { background: var(--_turq); }
.smmp-op-col__label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--_ink-2); }
.smmp-op-col .smmp-op__pill { white-space: normal; }

/* FAQ de la page de suivi */
.smmp-faq { margin: 40px 0 0; font-size: 15px; line-height: 1.55; }
.smmp-faq .smmp-faq__title {
  margin: 0 0 12px;
  color: var(--_ink);
  font-size: var(--fs-h2, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.smmp-faq__item { border-bottom: 1px solid var(--_line); }
.smmp-faq__item:first-of-type { border-top: 1px solid var(--_line); }
.smmp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color 150ms ease;
}
.smmp-faq__q::-webkit-details-marker { display: none; }
.smmp-faq__q::marker { content: ""; }
.smmp-faq__q svg { flex: none; width: 18px; height: 18px; color: var(--_ink-2); transition: transform 200ms var(--_ease); }
.smmp-faq__item[open] .smmp-faq__q svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .smmp-faq__q:hover { color: var(--_ink-2); }
}
.smmp-faq__q:focus-visible { outline: 2px solid var(--_link); outline-offset: 2px; }
.smmp-faq__a { margin: 0; padding: 0 4px 16px; color: var(--_ink-2); font-size: 14px; }
.smmp-faq__item[open] .smmp-faq__a { animation: smmp-faq-in 200ms var(--_ease); }
@keyframes smmp-faq-in { from { opacity: 0; transform: translateY(-4px); } }

/* 375 px : pas de défilement horizontal, pastille sous le titre, heures masquées */
@media (max-width: 600px) {
  .smmp-op { border-radius: 12px; }
  .smmp-op__head,
  .smmp-op__line { padding-inline: 16px; }
  .smmp-op__line-top { flex-wrap: wrap; row-gap: 8px; }
  .smmp-op__line-title { flex-basis: calc(100% - 56px); }
  .smmp-op__line-top .smmp-op__pill { margin-left: 56px; white-space: normal; }
  .smmp-op .smmp-op__btn { min-height: 40px; }
  .smmp-op .smmp-op__btn--refill { width: 100%; }
  .smmp-op__step-label { font-size: 11px; }
  .smmp-op__step-time { display: none; }
  .smmp-faq .smmp-faq__title { font-size: var(--fs-h3, 22px); }
}

/* Moins de mouvement : on garde les couleurs, on retire déplacements, rotation et pulsation */
@media (prefers-reduced-motion: reduce) {
  .smmp-op__bar > i,
  .smmp-op .smmp-op__btn,
  .smmp-op .smmp-op__btn--refill,
  .smmp-faq__q svg { transition: none; }
  .smmp-op__pill--run .smmp-op__pill-dot,
  .smmp-op__btn.is-loading svg,
  .smmp-faq__item[open] .smmp-faq__a { animation: none; }
}

/* Détails de la commande (tableau WooCommerce sous le bloc de suivi, page de suivi et Mon compte).
   Habillage seul : aucune donnée de commande n'est lue ni modifiée ici. Le tableau est mis en lignes
   souples (libellé ou article à gauche, montant à droite) : en mise en page de tableau, le récapitulatif
   hérite de la colonne « Produit », large, et les montants s'écrasent sur plusieurs lignes.
   Sélecteurs à deux classes pour passer devant les styles génériques de tableau du thème. */
.woocommerce-order-details {
  margin: 32px 0 0;
  border: 1px solid var(--_line);
  border-radius: 20px;
  background: var(--_card);
  overflow: hidden;
  font-size: 15px;
  line-height: 1.5;
}
.woocommerce-order-details .woocommerce-order-details__title {
  margin: 0;
  padding: 20px 24px 6px;
  font-size: var(--fs-h3, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--_ink);
}
.woocommerce-order-details table.woocommerce-table--order-details,
.woocommerce-order-details .woocommerce-table--order-details thead,
.woocommerce-order-details .woocommerce-table--order-details tbody,
.woocommerce-order-details .woocommerce-table--order-details tfoot {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  background: none;
}
.woocommerce-order-details .woocommerce-table--order-details tr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 0 24px;
  border: 0;
  background: none;
}
.woocommerce-order-details .woocommerce-table--order-details th,
.woocommerce-order-details .woocommerce-table--order-details td {
  display: block;
  padding: 14px 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--_ink);
  font-size: 15px;
  font-weight: 400;
}
/* Colonne de gauche souple, colonne des montants à sa largeur. */
.woocommerce-order-details .woocommerce-table--order-details .product-name { flex: 1 1 auto; min-width: 0; }
.woocommerce-order-details .woocommerce-table--order-details .product-total,
.woocommerce-order-details .woocommerce-table--order-details tfoot td {
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.woocommerce-order-details .woocommerce-table--order-details .amount { white-space: nowrap; }

/* En-tête discret. */
.woocommerce-order-details .woocommerce-table--order-details thead tr { border-bottom: 1px solid var(--_line); }
.woocommerce-order-details .woocommerce-table--order-details thead th {
  padding-block: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--_ink-2);
}

/* Articles : nom en clair, quantité en pastille, détails en libellé et valeur. */
.woocommerce-order-details .woocommerce-table--order-details tbody tr + tr { border-top: 1px solid var(--_line); }
.woocommerce-order-details .woocommerce-table--order-details tbody td.product-total { font-weight: 600; }
.woocommerce-order-details .product-name > a {
  color: var(--_ink);
  font-weight: 600;
  text-decoration: none;
}
.woocommerce-order-details .product-name .product-quantity {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--_track);
  color: var(--_ink-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: 1px;
}
.woocommerce-order-details .wc-item-meta {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce-order-details .wc-item-meta li {
  display: grid;
  gap: 2px;
  margin: 0;
  min-width: 0;
}
.woocommerce-order-details .wc-item-meta .wc-item-meta-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--_ink-2);
}
.woocommerce-order-details .wc-item-meta p { margin: 0; }
/* La liste des publications arrive avec un retrait en style en ligne : il est annulé ici. */
.woocommerce-order-details .wc-item-meta ul {
  display: grid;
  gap: 2px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.woocommerce-order-details .wc-item-meta a {
  color: var(--_ink-2);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--_line);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* Récapitulatif : libellé à gauche, montant à droite, total mis en avant. */
.woocommerce-order-details .woocommerce-table--order-details tfoot { padding: 8px 0 12px; border-top: 1px solid var(--_line); }
.woocommerce-order-details .woocommerce-table--order-details tfoot th,
.woocommerce-order-details .woocommerce-table--order-details tfoot td {
  padding-block: 6px;
  font-size: 14px;
  color: var(--_ink-2);
}
.woocommerce-order-details .woocommerce-table--order-details tfoot th { flex: none; font-weight: 500; white-space: nowrap; }
.woocommerce-order-details .woocommerce-table--order-details tfoot td { flex: 0 1 auto; min-width: 0; }
.woocommerce-order-details .woocommerce-table--order-details tfoot tr:has(.includes_tax) th,
.woocommerce-order-details .woocommerce-table--order-details tfoot tr:has(.includes_tax) td {
  color: var(--_ink);
  font-size: 16px;
  font-weight: 600;
}
.woocommerce-order-details .woocommerce-table--order-details .includes_tax {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--_ink-2);
}
.woocommerce-order-details .woocommerce-table--order-details tfoot tr:last-child { align-items: center; }

/* Bouton Facture : même bouton que « Actualiser ». */
.woocommerce-order-details .order-actions-button {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--_line);
  border-radius: 8px;
  background: var(--_card);
  color: var(--_ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 160ms var(--_ease), border-color 160ms ease;
}
.woocommerce-order-details .order-actions-button:active { transform: scale(0.97); }
.woocommerce-order-details .order-actions-button:focus-visible,
.woocommerce-order-details .product-name > a:focus-visible,
.woocommerce-order-details .wc-item-meta a:focus-visible {
  outline: 2px solid var(--_link);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .woocommerce-order-details .product-name > a:hover,
  .woocommerce-order-details .wc-item-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .woocommerce-order-details .order-actions-button:hover { border-color: var(--_ink-3); }
}
@media (max-width: 600px) {
  .woocommerce-order-details { border-radius: 12px; }
  .woocommerce-order-details .woocommerce-order-details__title { padding: 16px 16px 4px; font-size: 20px; }
  .woocommerce-order-details .woocommerce-table--order-details tr { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce-order-details .order-actions-button { transition: none; }
}

/* Page Suivi de commande : titre, introduction, phrase de statut et messages de l'équipe, dans la même
   voix que le bloc de suivi. Portée : la seule page qui porte la FAQ du suivi (.smmp-faq). Règles à part
   (jamais dans une liste avec d'autres sélecteurs) : un navigateur sans :has() ignore ces règles seules
   et garde l'affichage du thème. Habillage seul, aucune donnée de commande n'est lue ni modifiée. */
.jdp-page:has(.smmp-faq) {
  --_ink: var(--smmp-op-ink, #2F333B);
  --_ink-2: var(--smmp-op-ink-2, #69727D);
  --_line: var(--smmp-op-line, #E9E6ED);
  --_soft: var(--smmp-op-soft, #FBFBFC);
}
.jdp-page:has(.smmp-faq) .jdp-page-title {
  color: var(--_ink);
  font-size: var(--fs-h1, 40px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}
.jdp-page:has(.smmp-faq) .jdp-page-content > .wp-block-paragraph:first-child {
  max-width: 60ch;
  margin: 12px 0 32px;
  color: var(--_ink-2);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
}
/* Résultat affiché : l'invitation à saisir son numéro n'a plus d'objet. */
.jdp-page:has(.smmp-faq) .jdp-page-content:has(.order-info) > .wp-block-paragraph:first-child { display: none; }
.jdp-page:has(.smmp-faq) .jdp-page-content:has(.order-info) > .woocommerce { margin-top: 28px; }

/* Phrase de statut WooCommerce : sans le surlignage jaune par défaut des balises <mark>. */
.jdp-page:has(.smmp-faq) .woocommerce > .order-info {
  margin: 0 0 24px;
  color: var(--_ink-2);
  font-size: 15px;
  font-weight: 400;
}
.jdp-page:has(.smmp-faq) .woocommerce > .order-info mark {
  padding: 0;
  background: none;
  color: var(--_ink);
  font-weight: 600;
}
/* Le bloc de suivi redit le numéro, la date et l'état de chaque service : la phrase s'efface. */
.jdp-page:has(.smmp-faq) .woocommerce:has(> .smmp-op) > .order-info { display: none; }

/* Ordre de lecture : avancement, messages de l'équipe, puis détails de la commande. */
.jdp-page:has(.smmp-faq) .woocommerce:has(> .smmp-op) { display: flex; flex-direction: column; }
.jdp-page:has(.smmp-faq) .woocommerce:has(> .smmp-op) > * { order: 4; }
.jdp-page:has(.smmp-faq) .woocommerce:has(> .smmp-op) > .smmp-op { order: 1; }
.jdp-page:has(.smmp-faq) .woocommerce:has(> .smmp-op) > h2,
.jdp-page:has(.smmp-faq) .woocommerce:has(> .smmp-op) > .woocommerce-OrderUpdates { order: 2; }
.jdp-page:has(.smmp-faq) .woocommerce:has(> .smmp-op) > .woocommerce-order-details { order: 3; }

/* Messages de l'équipe (notes client de la commande). */
.jdp-page:has(.smmp-faq) .woocommerce > h2 {
  margin: 8px 0 12px;
  color: var(--_ink);
  font-size: var(--fs-h3, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.jdp-page:has(.smmp-faq) .woocommerce-OrderUpdates {
  display: grid;
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.jdp-page:has(.smmp-faq) .woocommerce-OrderUpdate {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--_line);
  border-radius: 16px;
  background: var(--_soft);
}
.jdp-page:has(.smmp-faq) .woocommerce-OrderUpdate-inner,
.jdp-page:has(.smmp-faq) .woocommerce-OrderUpdate-text {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.jdp-page:has(.smmp-faq) .woocommerce-OrderUpdate-meta {
  margin: 0 0 8px;
  color: var(--_ink-2);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.jdp-page:has(.smmp-faq) .woocommerce-OrderUpdate-description p {
  margin: 0 0 10px;
  color: var(--_ink);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  max-width: 68ch;
}
.jdp-page:has(.smmp-faq) .woocommerce-OrderUpdate-description p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .jdp-page:has(.smmp-faq) .jdp-page-title { font-size: 32px; }
  .jdp-page:has(.smmp-faq) .jdp-page-content > .wp-block-paragraph:first-child { font-size: 16px; margin-bottom: 24px; }
  .jdp-page:has(.smmp-faq) .woocommerce-OrderUpdate { padding: 16px; border-radius: 12px; }
}

/* Bouton Facture : le même que la liste Mes commandes (gris discret, icône de téléchargement), sur la page
   de suivi et dans le détail d'une commande. Poids monté pour passer devant `.woocommerce a.button` et
   `.jdp-wp-content a:not(.jdp-btn)` ; seules les factures sont visées, pas les autres actions. */
.woocommerce .woocommerce-order-details a.order-actions-button.invoice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  min-height: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #424245;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease, color 150ms ease;
}
.woocommerce .woocommerce-order-details a.order-actions-button.invoice::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7.5 10.5 4.5 4.5 4.5-4.5'/%3E%3Cpath d='M5 19.5h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7.5 10.5 4.5 4.5 4.5-4.5'/%3E%3Cpath d='M5 19.5h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce .woocommerce-order-details a.order-actions-button.invoice:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .woocommerce .woocommerce-order-details a.order-actions-button.invoice:hover { background: #f5f5f7; color: #1d1d1f; text-decoration: none; border: 0; }
}
@media (max-width: 600px) {
  .woocommerce .woocommerce-order-details a.order-actions-button.invoice { background: #f5f5f7; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce .woocommerce-order-details a.order-actions-button.invoice:active { transform: none; }
}