/**
 * Habillage WooCommerce.
 *
 * Ne charge que sur les pages boutique, panier, commande et compte. Les
 * gabarits complets arrivent en phase 8 : ce fichier pose pour l'instant les
 * bases pour que WooCommerce soit lisible dans la direction sombre, plutôt
 * que d'afficher ses styles clairs par défaut sur fond noir.
 */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: var(--dg-s-3) var(--dg-s-4);
  border: 1px solid var(--dg-line-strong);
  border-left-width: 3px;
  border-radius: var(--dg-r-sm);
  background: var(--dg-surface);
  color: var(--dg-ink);
  list-style: none;
  margin: 0 0 var(--dg-s-4);
}
.woocommerce-message { border-left-color: var(--dg-ok); }
.woocommerce-info    { border-left-color: var(--dg-neon-cyan); }
.woocommerce-error   { border-left-color: var(--dg-error); }

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--dg-accent);
  color: var(--dg-bg-deep);
  border-radius: var(--dg-r);
  padding: 13px 22px;
  font-weight: 700;
  font-size: var(--dg-t-sm);
  line-height: 1;
}
.woocommerce .button:hover { background: var(--dg-accent-soft); color: var(--dg-bg-deep); }

.woocommerce table.shop_table {
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-r-lg);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--dg-surface);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-bottom: 1px solid var(--dg-line);
  padding: var(--dg-s-3) var(--dg-s-4);
  color: var(--dg-ink);
}
.woocommerce table.shop_table th { color: var(--dg-faint); font-size: var(--dg-t-xs); text-transform: uppercase; letter-spacing: var(--dg-ls-label); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  background: var(--dg-surface-2);
  border: 1px solid var(--dg-line-strong);
  border-radius: var(--dg-r-sm);
  color: var(--dg-ink-2);
  padding: 11px 13px;
  font-family: inherit;
  font-size: var(--dg-t-sm);
}
.woocommerce form .form-row label { color: var(--dg-muted); font-size: var(--dg-t-xs); }

.woocommerce .price { color: var(--dg-accent); font-weight: 700; }
.woocommerce .price del { color: var(--dg-faint); font-weight: 400; }
.woocommerce .price ins { text-decoration: none; }

.woocommerce ul.products li.product a img { border-radius: var(--dg-r); }
.woocommerce span.onsale {
  background: var(--dg-accent); color: var(--dg-bg-deep);
  border-radius: var(--dg-r-pill); padding: 5px 12px; font-weight: 700; font-size: var(--dg-t-xs);
}

/* ---------- grille boutique ---------- */
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--dg-s-4); list-style: none; margin: 0; padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }

.dg-shop-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--dg-s-3);
  padding: var(--dg-s-3) 0 var(--dg-s-4); margin-bottom: var(--dg-s-4);
  border-bottom: 1px solid var(--dg-line); flex-wrap: wrap;
}
.dg-shop-toolbar .woocommerce-result-count { margin: 0; color: var(--dg-faint); font-size: var(--dg-t-xs); }
.dg-shop-toolbar select { background: var(--dg-surface-2); color: var(--dg-ink-2); border: 1px solid var(--dg-line-strong); border-radius: var(--dg-r-sm); padding: 9px 12px; font-size: var(--dg-t-sm); }

.dg-product__badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 5px 11px; border-radius: var(--dg-r-pill);
  background: var(--dg-accent); color: var(--dg-bg-deep);
  font-size: var(--dg-t-xs); font-weight: 700;
}
.dg-product__media { position: relative; }
.dg-product__action { padding: 0 var(--dg-s-3) var(--dg-s-3); }
.dg-product__action .dg-btn { width: 100%; }

/* ---------- fiche produit ---------- */
/* WooCommerce dispose encore ses deux colonnes en flottants à 48 %. Dans une
   grille, ces largeurs se réappliquent À L'INTÉRIEUR de chaque cellule : la
   galerie tombait à 290 px sur une colonne de 604, et le résumé à 263. On
   neutralise l'héritage avant de poser notre propre grille. */
.woocommerce div.product { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--dg-s-7); align-items: start; }
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary {
  width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important;
}
/* WooCommerce pose `.woocommerce div.product div.images.woocommerce-product-gallery
   { position: relative }` — plus spécifique que le sélecteur à trois classes
   qu'on écrivait ici. Le `sticky` n'a donc jamais pris, mais le `top: 96px`,
   lui, s'appliquait : un élément relatif décalé laisse sa place dans le flux
   et se dessine 96 px plus bas. En une colonne, les miniatures recouvraient le
   titre du produit. On reprend donc la spécificité de WooCommerce, et le
   `relative` sert d'ancrage aux flèches du carrousel, qui sont en absolu. */
.woocommerce div.product div.images.woocommerce-product-gallery {
  position: relative; top: auto;
}

/* La cellule de grille, c'est l'enveloppe (`dg_galerie_ouvre()`), pas la
   galerie. Chrome ne contraint pas un élément collant à sa cellule : il le
   laisse glisser jusqu'au bas du conteneur, donc par-dessus les onglets de la
   ligne suivante. Étirée sur toute la hauteur de la ligne, l'enveloppe borne
   ce glissement. */
.woocommerce div.product .dg-galerie { grid-column: 1; align-self: stretch; min-width: 0; }

@media (min-width: 1025px) {
  .woocommerce div.product div.images.woocommerce-product-gallery { position: sticky; top: 96px; }
}
.woocommerce div.product .summary { grid-column: 2; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .up-sells { grid-column: 1 / -1; }

.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--dg-r-lg); width: 100%; }
.woocommerce div.product .flex-control-thumbs {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  margin: 10px 0 0; padding: 0; list-style: none;
}
.woocommerce div.product .flex-control-thumbs li { width: auto !important; margin: 0 !important; float: none !important; }
.woocommerce div.product .flex-control-thumbs img { border-radius: var(--dg-r-sm); opacity: .55; border: 1px solid transparent; }
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; border-color: var(--dg-accent); }
.woocommerce div.product .woocommerce-product-gallery__trigger {
  background: var(--dg-surface); border: 1px solid var(--dg-line-strong); border-radius: 50%;
  width: 40px; height: 40px; display: grid; place-items: center; text-indent: 0; color: var(--dg-ink-2);
}

.woocommerce div.product .product_title { font-family: var(--dg-font-display); font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.025em; color: var(--dg-ink); margin: 0 0 var(--dg-s-3); }
.woocommerce div.product p.price { font-size: 24px; margin: 0 0 var(--dg-s-4); }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--dg-muted); font-size: var(--dg-t-sm); }
.woocommerce div.product form.cart { margin: var(--dg-s-4) 0; display: flex; gap: var(--dg-s-3); flex-wrap: wrap; align-items: center; }
.woocommerce div.product form.cart .quantity input {
  background: var(--dg-surface-2); border: 1px solid var(--dg-line-strong); border-radius: var(--dg-r-sm);
  color: var(--dg-ink); padding: 12px; width: 78px; font-family: inherit;
}
.dg-ship-note { color: var(--dg-faint); font-size: var(--dg-t-xs); margin: 0 0 var(--dg-s-3); }

.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: var(--dg-s-4); list-style: none; margin: 0 0 var(--dg-s-4); padding: 0 0 var(--dg-s-3); border-bottom: 1px solid var(--dg-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: none; border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--dg-faint); font-weight: 700; font-size: var(--dg-t-sm); padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--dg-accent); }
.woocommerce div.product .woocommerce-tabs .panel { color: var(--dg-ink); }

/* Avis : conserver l'affichage natif, sans jamais fabriquer de note moyenne. */
.woocommerce .star-rating span { color: var(--dg-accent); }
.woocommerce #reviews #comments ol.commentlist li .comment-text { border: 1px solid var(--dg-line); border-radius: var(--dg-r); background: var(--dg-surface); padding: var(--dg-s-4); }

/* ---------- panier, commande, compte ---------- */
.woocommerce-cart-form,
.woocommerce-checkout,
.woocommerce-account .woocommerce { color: var(--dg-ink-2); }

.cart_totals, .cart-collaterals { margin-top: var(--dg-s-5); }
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2 { font-family: var(--dg-font-display); font-weight: 600; color: var(--dg-ink); font-size: 19px; letter-spacing: -.02em; }

.woocommerce-checkout #payment { background: var(--dg-surface); border: 1px solid var(--dg-line); border-radius: var(--dg-r-lg); padding: var(--dg-s-4); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--dg-line); padding: 0 0 var(--dg-s-3); }
.woocommerce-checkout #payment div.payment_box { background: var(--dg-surface-2); border-radius: var(--dg-r-sm); color: var(--dg-muted); font-size: var(--dg-t-sm); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* ==========================================================================
   Espace client
   ========================================================================== */

/* WooCommerce pose la navigation et le contenu en freres dans .woocommerce :
   une grille sur le parent suffit a en faire deux colonnes, sans toucher au
   balisage que les extensions attendent. */
/* Deconnecte, WooCommerce n'affiche pas de navigation : la grille reserverait
   une colonne vide de 264 px et decalerait le formulaire de connexion. On la
   conditionne donc a l'etat connecte, seul cas ou la colonne a un contenu. */
.woocommerce-account.logged-in .woocommerce {
  display: grid; grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--dg-s-6); align-items: start;
}

/* Formulaires de connexion et d'inscription, page deconnectee. */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 940px; }
.woocommerce-account #customer_login.u-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dg-s-5); }
/* Les pseudo-elements de clearfix de WooCommerce deviennent des cellules de
   grille et poussent les formulaires d'une colonne vers la droite. */
.woocommerce-account #customer_login.u-columns::before,
.woocommerce-account #customer_login.u-columns::after { display: none; }
.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2 { width: 100%; float: none; margin: 0; }
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  margin: 0; padding: var(--dg-s-5);
  background: var(--dg-surface); border: 1px solid var(--dg-line); border-radius: var(--dg-r-lg);
}
.woocommerce-account .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--dg-t-xs); color: var(--dg-ink-3); }
.woocommerce-account .woocommerce-form-login__rememberme input { width: auto; accent-color: var(--dg-accent); }
.woocommerce-account .woocommerce-LostPassword { margin: var(--dg-s-3) 0 0; font-size: var(--dg-t-xs); }
.woocommerce-account .woocommerce-LostPassword a { color: var(--dg-accent); }
.woocommerce-account.logged-in .woocommerce::before,
.woocommerce-account.logged-in .woocommerce::after { display: none; }

/* WooCommerce repose width:30% / float:left sur ces deux blocs. Dans une
   grille, ces valeurs se recalculent sur la colonne et retrecissent les
   cellules a 79 px et 620 px. Meme correctif que sur la fiche produit. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  width: 100% !important; float: none !important; margin: 0 !important;
}

/* ---------- navigation laterale ---------- */
.dg-account-nav { position: sticky; top: 96px; }
.dg-account-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.dg-account-nav__out { margin-top: var(--dg-s-3); padding-top: var(--dg-s-3); border-top: 1px solid var(--dg-line); }
.dg-account-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: var(--dg-r-sm);
  color: var(--dg-ink-3); font-size: var(--dg-t-sm); font-weight: 500;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dg-account-nav a:hover { background: var(--dg-surface-2); color: var(--dg-ink); }
.dg-account-nav .dg-i { flex: 0 0 auto; color: var(--dg-faint); transition: color .15s ease; }
.dg-account-nav a:hover .dg-i { color: var(--dg-ink-3); }
.dg-account-nav .is-active a {
  background: var(--dg-surface); border-color: var(--dg-line-strong);
  color: var(--dg-accent); font-weight: 600;
}
.dg-account-nav .is-active .dg-i { color: var(--dg-accent); }

/* ---------- contenu ---------- */
.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > p:first-child:last-child { margin-top: 0; }

.dg-account { display: flex; flex-direction: column; gap: var(--dg-s-5); }
.dg-account__hello { margin: 0; font-size: var(--dg-t-lead); color: var(--dg-ink); }
.dg-account__hello strong { color: var(--dg-accent); }

.dg-account__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--dg-s-3); margin: 0; padding: 0; list-style: none;
}
.dg-account__stats li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 20px; background: var(--dg-surface);
  border: 1px solid var(--dg-line); border-radius: var(--dg-r);
}
.dg-account__n { font-size: 27px; font-weight: 700; line-height: 1.1; color: var(--dg-accent); font-variant-numeric: tabular-nums; }
.dg-account__n .woocommerce-Price-amount { color: inherit; font: inherit; }
.dg-account__k { font-size: var(--dg-t-xs); color: var(--dg-ink-3); }

/* ---------- derniere commande ---------- */
.dg-account__last h2,
.dg-account__raccourcis h2 { margin: 0 0 var(--dg-s-3); }
.dg-account__order { background: var(--dg-surface); border: 1px solid var(--dg-line); border-radius: var(--dg-r-lg); overflow: hidden; }
.dg-account__order-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 18px 22px; border-bottom: 1px solid var(--dg-line);
}
.dg-account__order-id { margin: 0; font-size: var(--dg-t-sm); color: var(--dg-ink); }
.dg-account__order-id strong { color: var(--dg-ink); }
.dg-account__order-id time { display: block; margin-top: 2px; font-size: var(--dg-t-xs); color: var(--dg-faint); }

.dg-statut {
  margin: 0; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  background: var(--dg-surface-2); color: var(--dg-ink-3);
  border: 1px solid var(--dg-line-strong);
}
.dg-statut--completed { background: rgba(57, 255, 106, .1); color: var(--dg-accent); border-color: rgba(57, 255, 106, .35); }
.dg-statut--processing,
.dg-statut--on-hold { background: rgba(255, 181, 61, .1); color: #FFB53D; border-color: rgba(255, 181, 61, .35); }
.dg-statut--cancelled,
.dg-statut--failed,
.dg-statut--refunded { background: rgba(255, 61, 154, .1); color: #FF3D9A; border-color: rgba(255, 61, 154, .35); }

.dg-account__items { list-style: none; margin: 0; padding: 0; }
.dg-account__items li {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; font-size: var(--dg-t-sm); color: var(--dg-ink-2);
}
.dg-account__items li + li { border-top: 1px solid var(--dg-line); }
.dg-account__vignette { flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--dg-r-sm); overflow: hidden; background: var(--dg-surface-2); }
.dg-account__vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-account__nom { flex: 1 1 auto; min-width: 0; color: var(--dg-ink); }
.dg-account__qte { flex: 0 0 auto; color: var(--dg-faint); font-variant-numeric: tabular-nums; }

.dg-account__order-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 18px 22px; border-top: 1px solid var(--dg-line); background: var(--dg-surface-2);
}
.dg-account__montant { margin: 0; font-size: 20px; font-weight: 700; color: var(--dg-accent); }
.dg-account__montant .woocommerce-Price-amount { color: inherit; }

.dg-account__vide {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--dg-s-3);
  padding: var(--dg-s-5); background: var(--dg-surface);
  border: 1px dashed var(--dg-line-strong); border-radius: var(--dg-r-lg);
}
.dg-account__vide p { margin: 0; color: var(--dg-ink-3); }

.dg-account__tuile { text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.dg-account__tuile:hover { border-color: var(--dg-accent); transform: translateY(-2px); }
.dg-account__tuile .dg-card__title { color: var(--dg-ink); }

.dg-account__out { margin: 0; font-size: var(--dg-t-xs); color: var(--dg-faint); }
.dg-account__out a { color: var(--dg-ink-3); text-decoration: underline; }

/* ---------- tableaux : commandes, telechargements ---------- */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-table--order-details,
.woocommerce-account .shop_table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--dg-line); border-radius: var(--dg-r-lg); overflow: hidden;
  font-size: var(--dg-t-sm);
}
.woocommerce-account .shop_table th,
.woocommerce-account .shop_table td { padding: 15px 18px; text-align: left; border: 0; }
.woocommerce-account .shop_table thead th {
  background: var(--dg-surface-2); color: var(--dg-faint);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.woocommerce-account .shop_table tbody tr + tr td { border-top: 1px solid var(--dg-line); }
.woocommerce-account .shop_table tbody td { color: var(--dg-ink-2); vertical-align: middle; }
.woocommerce-account .shop_table tfoot th,
.woocommerce-account .shop_table tfoot td { border-top: 1px solid var(--dg-line); color: var(--dg-ink); }
.woocommerce-account .woocommerce-orders-table__cell-order-number a { color: var(--dg-accent); font-weight: 600; }
.woocommerce-account .woocommerce-orders-table__cell-order-actions { text-align: right; white-space: nowrap; }

/* ---------- adresses ---------- */
.woocommerce-account .woocommerce-Addresses {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--dg-s-4);
}
.woocommerce-account .woocommerce-Address { width: auto; float: none; padding: var(--dg-s-4); background: var(--dg-surface); border: 1px solid var(--dg-line); border-radius: var(--dg-r-lg); }
.woocommerce-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--dg-s-3); }
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 { margin: 0; }
.woocommerce-account .woocommerce-Address-title .edit { font-size: var(--dg-t-xs); color: var(--dg-accent); }
.woocommerce-account address { font-style: normal; line-height: 1.7; color: var(--dg-ink-3); }

/* ---------- formulaires ---------- */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account form.edit-account,
.woocommerce-account .woocommerce-address-fields {
  max-width: 620px; padding: var(--dg-s-5);
  background: var(--dg-surface); border: 1px solid var(--dg-line); border-radius: var(--dg-r-lg);
}
.woocommerce-account fieldset { margin-top: var(--dg-s-4); padding: var(--dg-s-4) 0 0; border: 0; border-top: 1px solid var(--dg-line); }
.woocommerce-account fieldset legend { padding: 0; font-family: var(--dg-font-display); font-size: 17px; color: var(--dg-ink); }
.woocommerce-account .woocommerce-form-row { margin-bottom: var(--dg-s-3); }
.woocommerce-account label { display: block; margin-bottom: 6px; font-size: var(--dg-t-xs); font-weight: 600; color: var(--dg-ink-3); }
.woocommerce-account .woocommerce-Input,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account select,
.woocommerce-account textarea {
  width: 100%; padding: 12px 14px;
  background: var(--dg-surface-2); color: var(--dg-ink);
  border: 1px solid var(--dg-line-strong); border-radius: var(--dg-r-sm);
  font-family: inherit; font-size: var(--dg-t-sm);
}
.woocommerce-account .woocommerce-Input:focus,
.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus { outline: 2px solid var(--dg-accent); outline-offset: 1px; border-color: transparent; }
.woocommerce-account em { display: block; margin-top: 5px; font-size: var(--dg-t-xs); font-style: normal; color: var(--dg-faint); }

/* ---------- etats vides des sous-pages ---------- */
.woocommerce-account .woocommerce-Message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-notice {
  display: flex; align-items: center; justify-content: space-between; gap: var(--dg-s-3); flex-wrap: wrap;
  padding: var(--dg-s-4); background: var(--dg-surface);
  border: 1px dashed var(--dg-line-strong); border-radius: var(--dg-r-lg);
  color: var(--dg-ink-3);
}
.woocommerce-account .woocommerce-Message::before,
.woocommerce-account .woocommerce-info::before { display: none; }

@media (max-width: 900px) {
  .woocommerce-account #customer_login.u-columns { grid-template-columns: 1fr; }
  .woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; gap: var(--dg-s-4); }
  .dg-account-nav { position: static; }
  .dg-account-nav ul { flex-direction: row; flex-wrap: wrap; }
  .dg-account-nav a { padding: 9px 13px; border: 1px solid var(--dg-line); background: var(--dg-surface); }
  .dg-account-nav__out { margin-top: 0; padding-top: 0; border-top: 0; }
}

@media (max-width: 560px) {
  .woocommerce-account .shop_table th,
  .woocommerce-account .shop_table td { padding: 12px 13px; }
  .dg-account__order-head, .dg-account__items li, .dg-account__order-foot { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .woocommerce div.product { grid-template-columns: 1fr; gap: var(--dg-s-5); }
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce div.product .summary { grid-column: 1; }
}
@media (max-width: 780px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dg-s-3); }
}
@media (max-width: 420px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}


/* ---------- boutons WooCommerce, y compris la variante « alt » ----------
   Le bouton d'ajout au panier porte .button.alt, dont la règle WooCommerce est
   plus spécifique que la nôtre : il restait au violet #7F54B3 par défaut. */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.button.alt.disabled {
  background: var(--dg-accent); color: var(--dg-bg-deep);
  border-radius: var(--dg-r); font-weight: 700; padding: 15px 26px; font-size: var(--dg-t-sm);
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: var(--dg-accent-soft); color: var(--dg-bg-deep); }
.woocommerce button.button.alt.disabled { opacity: .45; }

/* ---------- sélecteurs de variation ----------
   Ils sortaient en texte noir sur fond transparent : invisibles sur fond noir. */
.woocommerce div.product form.cart .variations {
  width: 100%; border: 0; margin: 0 0 var(--dg-s-3);
  display: grid; gap: var(--dg-s-3);
}
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr { display: contents; }
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { display: block; padding: 0; border: 0; }
.woocommerce div.product form.cart .variations label {
  display: block; margin-bottom: 6px;
  font-size: var(--dg-t-xs); font-weight: 700; letter-spacing: var(--dg-ls-label);
  text-transform: uppercase; color: var(--dg-faint);
}
.woocommerce div.product form.cart .variations select {
  width: 100%; appearance: none; -webkit-appearance: none;
  padding: 13px 40px 13px 14px;
  background-color: var(--dg-surface-2);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237E8C86' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  border: 1px solid var(--dg-line-strong); border-radius: var(--dg-r-sm);
  color: var(--dg-ink-2); font-family: inherit; font-size: var(--dg-t-sm);
}
.woocommerce div.product form.cart .variations select option { background: var(--dg-surface); color: var(--dg-ink-2); }
.woocommerce div.product form.cart .reset_variations { color: var(--dg-faint); font-size: var(--dg-t-xs); }
.woocommerce div.product .woocommerce-variation-price { margin-bottom: var(--dg-s-3); }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; gap: var(--dg-s-3); align-items: center; flex-wrap: wrap; width: 100%; }

/* ---------- tableaux dans la description ---------- */
.woocommerce div.product .summary table:not(.variations),
.woocommerce div.product .woocommerce-Tabs-panel table,
.dg-prose table {
  width: 100%; border-collapse: collapse; margin: var(--dg-s-3) 0; font-size: var(--dg-t-sm);
}
.woocommerce div.product .summary table:not(.variations) td,
.woocommerce div.product .summary table:not(.variations) th,
.woocommerce div.product .woocommerce-Tabs-panel table td,
.woocommerce div.product .woocommerce-Tabs-panel table th {
  border: 1px solid var(--dg-line); padding: 9px 12px; color: var(--dg-ink-3); text-align: left;
}
.woocommerce div.product .summary table:not(.variations) th,
.woocommerce div.product .woocommerce-Tabs-panel table th { background: var(--dg-surface-2); color: var(--dg-faint); font-weight: 700; }

/* La table des variations n'est pas un tableau de données : elle sert
   seulement de squelette au formulaire. Aucun fond, aucune bordure. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th {
  background: none !important; border: 0 !important; padding: 0 !important;
}

/* ---------- onglets ---------- */
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 0 0 10px; border-bottom: 2px solid transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--dg-accent); }
.woocommerce div.product .woocommerce-tabs .panel p { color: var(--dg-ink); }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-family: var(--dg-font-display); font-size: 21px; font-weight: 600; color: var(--dg-ink); letter-spacing: -.02em; }

/* ---------- métadonnées et quantité ---------- */
.woocommerce div.product .product_meta { font-size: var(--dg-t-xs); color: var(--dg-faint); border-top: 1px solid var(--dg-line); padding-top: var(--dg-s-3); margin-top: var(--dg-s-4); }
.woocommerce div.product .product_meta a { color: var(--dg-muted); }
.woocommerce div.product .product_meta a:hover { color: var(--dg-accent); }
.woocommerce .quantity input[type="number"] { -moz-appearance: textfield; }

/* ---------- responsive ---------- */
@media (max-width: 780px) {
  .woocommerce div.product .flex-control-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .woocommerce div.product form.cart { flex-direction: column; align-items: stretch; }
  .woocommerce div.product form.cart .button { width: 100%; }
}

/* ---------- flèches du carrousel ---------- */
/* L'ancrage `position: relative` est déclaré plus haut, avec la galerie. */
.woocommerce div.product .flex-direction-nav {
  list-style: none; margin: 0; padding: 0;
  position: absolute; inset: 0; pointer-events: none;
}
.woocommerce div.product .flex-direction-nav li { position: static; margin: 0; }
.woocommerce div.product .flex-direction-nav a {
  position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px;
  display: grid; place-items: center; pointer-events: auto;
  background: rgba(10, 12, 11, .74); backdrop-filter: blur(6px);
  border: 1px solid var(--dg-line-strong); border-radius: 50%;
  color: transparent; text-indent: 0; overflow: hidden;
  opacity: 0; transition: opacity .18s var(--dg-ease), border-color .18s var(--dg-ease);
}
.woocommerce div.product .woocommerce-product-gallery:hover .flex-direction-nav a,
.woocommerce div.product .flex-direction-nav a:focus-visible { opacity: 1; }
.woocommerce div.product .flex-direction-nav a:hover { border-color: var(--dg-accent); }
.woocommerce div.product .flex-direction-nav .flex-prev { left: 14px; }
.woocommerce div.product .flex-direction-nav .flex-next { right: 14px; }
/* Le chevron est dessiné en CSS : FlexSlider n'expose pas de gabarit d'icône. */
.woocommerce div.product .flex-direction-nav a::before {
  content: ''; width: 10px; height: 10px;
  border-left: 2px solid var(--dg-ink-2); border-bottom: 2px solid var(--dg-ink-2);
  border-radius: 1px;
}
.woocommerce div.product .flex-direction-nav .flex-prev::before { transform: translateX(2px) rotate(45deg); }
.woocommerce div.product .flex-direction-nav .flex-next::before { transform: translateX(-2px) rotate(-135deg); }
.woocommerce div.product .flex-direction-nav a.flex-disabled { opacity: 0 !important; }

/* La réassurance vit desormais dans main.css : elle sert aussi hors boutique,
   notamment sous le configurateur de néon, ou shop.css n'est pas charge. */

/* ---------- description centrée ---------- */
.woocommerce div.product .woocommerce-tabs .panel {
  max-width: 74ch; margin-inline: auto;
}
.woocommerce div.product .woocommerce-tabs ul.tabs { justify-content: center; }
.woocommerce div.product .related > h2,
.woocommerce div.product .up-sells > h2 { text-align: center; }

/* ---------- fiche produit : hiérarchie ---------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .woocommerce-variation-price .price {
  color: var(--dg-accent);
  font-family: var(--dg-font-display); font-weight: 700; letter-spacing: -.02em;
}
.woocommerce div.product p.price del,
.woocommerce div.product .woocommerce-variation-price del { color: var(--dg-faint); font-weight: 400; font-family: var(--dg-font-body); }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product .woocommerce-product-details__short-description { color: var(--dg-ink); font-size: 15px; }
.woocommerce div.product .woocommerce-product-details__short-description ul { padding-left: 18px; }
.woocommerce div.product .woocommerce-product-details__short-description li { margin-bottom: 5px; }

/* Disponibilité : une pastille lisible d'un coup d'œil. */
.woocommerce div.product .stock {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--dg-t-xs); font-weight: 700; margin: 0 0 var(--dg-s-3);
}
.woocommerce div.product .stock::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.woocommerce div.product .stock.in-stock { color: var(--dg-accent); }
.woocommerce div.product .stock.out-of-stock { color: var(--dg-error); }

.woocommerce div.product .woocommerce-tabs { margin-top: var(--dg-s-8); padding-top: var(--dg-s-6); border-top: 1px solid var(--dg-line); }
.woocommerce div.product .related { margin-top: var(--dg-s-8); }
.woocommerce div.product .related > h2 {
  font-family: var(--dg-font-display); font-size: var(--dg-t-h2); font-weight: 700;
  letter-spacing: var(--dg-ls-h2); color: var(--dg-ink); margin-bottom: var(--dg-s-5);
}

/* ---------- sélecteur de quantité ----------
   Les flèches natives d'un input[type=number] ne se stylent pas : elles sont
   masquées et remplacées par deux boutons qui pilotent la même valeur. */
.dg-qty {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--dg-line-strong); border-radius: var(--dg-r-sm);
  background: var(--dg-surface-2); overflow: hidden;
}
.woocommerce .dg-qty input.qty,
.woocommerce div.product form.cart .dg-qty input.qty {
  width: 52px; padding: 12px 4px; text-align: center;
  background: none; border: 0; border-radius: 0;
  color: var(--dg-ink); font-family: inherit; font-size: var(--dg-t-sm); font-weight: 700;
  -moz-appearance: textfield; appearance: textfield;
}
.dg-qty input.qty::-webkit-outer-spin-button,
.dg-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dg-qty__btn {
  width: 40px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--dg-muted); font-size: 17px; line-height: 1;
  transition: color .15s var(--dg-ease), background .15s var(--dg-ease);
}
.dg-qty__btn:hover { color: var(--dg-accent); background: rgba(57, 255, 106, .07); }
.dg-qty__btn:focus-visible { outline: 2px solid var(--dg-accent); outline-offset: -2px; }

.single_add_to_cart_button.is-loading { opacity: .6; pointer-events: none; }

/* ---------- fenêtre « ajouté aux favoris » (TI Wishlist) ----------
   Elle sortait en boîte blanche avec du texte blanc : le message était
   littéralement illisible. */
.tinv-overlay { background: rgba(0, 0, 0, .62) !important; opacity: 1 !important; }
.tinv-modal .tinv-modal-inner {
  background: var(--dg-surface) !important;
  border: 1px solid var(--dg-line-strong) !important;
  border-radius: var(--dg-r-lg) !important;
  box-shadow: var(--dg-shadow) !important;
  color: var(--dg-ink) !important;
  padding: var(--dg-s-5) !important;
  max-width: 400px;
}
.tinv-modal .tinv-modal-inner *,
.tinv-modal .tinv-txt,
.tinv-modal .tinv-txt * { color: var(--dg-ink) !important; }
.tinv-modal .tinv-txt {
  font-family: var(--dg-font-body); font-size: 15px; line-height: 1.55;
  margin-bottom: var(--dg-s-4) !important;
}
.tinv-modal .tinv-txt a { color: var(--dg-accent) !important; }
.tinv-modal .tinvwl-buttons-group { display: grid; gap: 10px; }
.tinv-modal .tinvwl-buttons-group button,
.tinv-modal .tinvwl-buttons-group a {
  width: 100%; justify-content: center;
  padding: 13px 18px !important; border-radius: var(--dg-r) !important;
  font-family: var(--dg-font-body) !important; font-weight: 700 !important; font-size: var(--dg-t-sm) !important;
  background: transparent !important; border: 1px solid var(--dg-line-strong) !important;
  color: var(--dg-ink-2) !important;
}
.tinv-modal .tinvwl-buttons-group button:hover,
.tinv-modal .tinvwl-buttons-group a:hover { border-color: var(--dg-accent) !important; color: var(--dg-accent) !important; }
/* Le premier bouton est l'action utile : lui seul est plein. */
.tinv-modal .tinvwl-buttons-group:first-of-type button,
.tinv-modal .tinvwl-buttons-group:first-of-type a {
  background: var(--dg-accent) !important; border-color: var(--dg-accent) !important; color: var(--dg-bg-deep) !important;
}
.tinv-modal .tinv-modal-inner .tinv-close-modal { color: var(--dg-muted) !important; }

/* Le cœur « ajouter aux favoris » sur la fiche produit. */
.tinv-wishlist .tinvwl_add_to_wishlist_button { color: var(--dg-muted); font-size: var(--dg-t-xs); }
.tinv-wishlist .tinvwl_add_to_wishlist_button:hover,
.tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-product-in-list { color: var(--dg-accent); }

/* ==========================================================================
   Liste de souhaits (TI WooCommerce Wishlist)
   L'extension apporte son propre thème clair. Ces règles la ramènent dans la
   charte ; elles ne s'appliquent qu'à son balisage, jamais au reste du site.
   ========================================================================== */
.tinv-wishlist { color: var(--dg-ink-2); }
.tinv-wishlist h2 { font-family: var(--dg-font-display); color: var(--dg-ink); }

.tinv-wishlist .tinv-header { margin-bottom: var(--dg-s-4); }

.tinv-wishlist .woocommerce-info,
.tinv-wishlist .woocommerce-message,
.tinv-wishlist .woocommerce-error {
  background: var(--dg-surface) !important;
  color: var(--dg-ink-3) !important;
  border: 1px dashed var(--dg-line-strong) !important;
  border-radius: var(--dg-r-lg);
  padding: var(--dg-s-4);
}
.tinv-wishlist .woocommerce-info::before,
.tinv-wishlist .woocommerce-message::before { display: none !important; }
.tinv-wishlist .woocommerce-info a { color: var(--dg-accent); }

.tinv-wishlist table.tinvwl-table-manage-list {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--dg-surface); color: var(--dg-ink-2);
  border: 1px solid var(--dg-line); border-radius: var(--dg-r-lg); overflow: hidden;
}
.tinv-wishlist table.tinvwl-table-manage-list th,
.tinv-wishlist table.tinvwl-table-manage-list td { border: 0; padding: 14px 16px; }
.tinv-wishlist table.tinvwl-table-manage-list thead th {
  background: var(--dg-surface-2); color: var(--dg-faint);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.tinv-wishlist table.tinvwl-table-manage-list tbody tr + tr td { border-top: 1px solid var(--dg-line); }
.tinv-wishlist .product-name a { color: var(--dg-ink); }
.tinv-wishlist .amount { color: var(--dg-accent); }

.tinv-wishlist .button,
.tinv-wishlist a.button,
.tinv-wishlist button.button {
  background: var(--dg-surface-2) !important;
  color: var(--dg-ink) !important;
  border: 1px solid var(--dg-line-strong) !important;
  border-radius: var(--dg-r-sm);
}
.tinv-wishlist .button:hover,
.tinv-wishlist a.button:hover { border-color: var(--dg-accent) !important; color: var(--dg-accent) !important; }
.tinv-wishlist .tinvwl-buttons-group .button.alt,
.tinv-wishlist button.alt {
  background: var(--dg-accent) !important; color: var(--dg-bg-deep) !important; border-color: var(--dg-accent) !important;
}

/* ------------------------------------------------------------------
 * Pastilles de couleur
 * Le menu déroulant reste dans le DOM : c'est lui que WooCommerce lit.
 * Il n'est masqué que si le script a pris la main (classe posée en JS),
 * pour qu'une panne de JavaScript laisse un formulaire utilisable.
 * ------------------------------------------------------------------ */
.woocommerce div.product select.dg-select--remplace {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.dg-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dg-s-2);
  margin-top: 2px;
}

.dg-swatch {
  --dg-swatch-taille: 30px;
  appearance: none;
  padding: 3px;
  border: 1px solid var(--dg-line-strong);
  border-radius: var(--dg-r-pill);
  background: transparent;
  line-height: 0;
  cursor: pointer;
  transition: border-color .15s var(--dg-ease), transform .15s var(--dg-ease);
}

.dg-swatch__pastille {
  display: block;
  width: var(--dg-swatch-taille);
  height: var(--dg-swatch-taille);
  border-radius: var(--dg-r-pill);
  /* Un liseré intérieur : sans lui, une pastille blanche ou noire se perd
     dans le fond sombre du thème. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.dg-swatch:hover { border-color: var(--dg-line-strong); transform: translateY(-1px); }
.dg-swatch:focus-visible { outline: 2px solid var(--dg-accent); outline-offset: 2px; }

.dg-swatch.is-actif {
  border-color: var(--dg-accent);
  box-shadow: 0 0 0 1px var(--dg-accent), 0 0 12px var(--dg-accent-wash);
}

/* Indisponible avec les autres choix en cours : visible, mais barré et
   inactif. On ne le retire pas — l'absence d'une couleur qu'on cherche est
   plus déroutante qu'une couleur affichée hors d'atteinte. */
.dg-swatch.is-indisponible {
  cursor: not-allowed;
  opacity: .38;
}

.dg-swatch.is-indisponible .dg-swatch__pastille {
  position: relative;
  overflow: hidden;
}

.dg-swatch.is-indisponible .dg-swatch__pastille::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top left, transparent calc(50% - 1px), var(--dg-ink-3) calc(50% - 1px), var(--dg-ink-3) calc(50% + 1px), transparent calc(50% + 1px));
}

.dg-swatches__nom {
  color: var(--dg-ink-3);
  font-size: var(--dg-t-sm);
  margin-left: var(--dg-s-1);
}

@media (prefers-reduced-motion: reduce) {
  .dg-swatch { transition: none; }
  .dg-swatch:hover { transform: none; }
}