/**
 * 40 · LA BOUTIQUE — chargée seulement là où l'on vend.
 *
 * `inc/ressources.php` ne met cette feuille en file que sur les pages
 * WooCommerce. La charger sur « À propos » ferait payer 12 Ko à quelqu'un qui
 * lit une biographie.
 */

/* ═══ LA LISTE DES PRODUITS ══════════════════════════════════════════ */

.boutique__entete { margin-block-end: var(--e-12); }

.boutique__outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-block-end: var(--e-8);
  padding-block-end: var(--e-4);
  border-block-end: var(--filet) solid var(--acier);
}

.boutique__compte { color: var(--gris); font-size: var(--t-sm); }

/* Les familles de la boutique — les trois situations de lecteur. */
.rayon { margin-block-end: var(--e-24); }

.rayon__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-3);
  margin-block-end: var(--e-8);
}

.rayon__titre { font-size: var(--t-3xl); }
.rayon__pour  { color: var(--gris); }

/* La disponibilité, dans la liste — elle n'y était jamais affichée. */
.dispo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-xs);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}

.dispo::before {
  content: '';
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: 50%;
  background: currentColor;
}

.dispo--ok      { color: var(--succes); }
.dispo--bientot { color: var(--alerte); }
.dispo--non     { color: var(--gris); }


/* ═══ LA FICHE PRODUIT ═══════════════════════════════════════════════ */

.fiche {
  display: grid;
  gap: var(--e-12);
  align-items: start;
}

@media (min-width: 60rem) {
  .fiche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.fiche__visuels { display: grid; gap: var(--e-3); }

.fiche__image {
  inline-size: 100%;
  background: var(--panneau-creux);
  border: var(--filet) solid var(--acier);
}

.fiche__vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  gap: var(--e-2);
}

.fiche__titre { font-size: var(--t-4xl); }

.fiche__prix {
  font-family: var(--titre);
  font-size: var(--t-4xl);
  color: var(--blanc);
  margin-block: var(--e-3);
}

.fiche__resume {
  color: var(--texte);
  font-size: var(--t-lg);
  margin-block-end: var(--e-6);
}

.fiche__achat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-block: var(--e-6);
}

.fiche__description { margin-block-start: var(--e-16); }


/* ═══ LE PANIER ET LA COMMANDE ═══════════════════════════════════════ */

/* ⚠ Les règles des étapes du tunnel ont été DÉDOUBLÉES le 20 septembre 2026 :
   deux séries les déclaraient, ici et plus bas. Seule celle du bas subsiste —
   c'est elle qui porte les numéros et le repli sur téléphone. */


/* ═══════════════════════════════════════════════════════════════════════
   LE TUNNEL — fiche produit, panier, caisse, confirmation
   ═══════════════════════════════════════════════════════════════════════
   WooCommerce rend ses gabarits par défaut ; on ne les recopie pas, on les
   habille. Relevé du 5 septembre 2026 : champs blancs sur fond noir, boutons
   violets, colonne étroite. Tout ce qui suit cible les classes de
   WooCommerce, jamais un balisage à nous — un gabarit mis à jour par
   l'extension reste habillé.                                                */

/* ── La largeur : le tunnel a droit à toute la page ─────────────────── */

#contenu > .page--etroite:has(> .woocommerce),
#contenu > .product {
  max-inline-size: 72rem;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* ── Les champs, partout dans WooCommerce ───────────────────────────── */

.woocommerce .input-text,
.woocommerce select,
.woocommerce textarea,
.woocommerce .qty,
.select2-container--default .select2-selection--single {
  inline-size: 100%;
  min-block-size: 2.9rem;
  padding: .6rem .8rem;
  border: var(--filet) solid var(--acier);
  border-radius: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: inherit;
  font-size: var(--t-base);   /* 16 px : Safari iPhone ne zoome pas */
  line-height: 1.4;
}

.woocommerce .input-text:focus-visible,
.woocommerce select:focus-visible,
.woocommerce textarea:focus-visible,
.select2-container--default.select2-container--focus .select2-selection--single { outline: var(--filet) solid var(--or); outline-offset: 2px; border-color: var(--or); }

.select2-container--default .select2-selection--single { display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--blanc); line-height: 1.4; padding-inline-start: 0; }
.select2-container--default .select2-selection--single .select2-selection__arrow { block-size: 100%; }
.select2-dropdown { background: var(--panneau); border: var(--filet) solid var(--acier); border-radius: 0; color: var(--blanc); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--rouge-surface); }
.select2-container--default .select2-search--dropdown .select2-search__field { background: var(--noir); border-color: var(--acier); color: var(--blanc); }

.woocommerce form .form-row { margin-block-end: var(--e-3); }
.woocommerce form .form-row label {
  display: block;
  margin-block-end: .35rem;
  color: var(--gris);
  font-family: var(--titre);
  font-size: var(--t-xs);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}
.woocommerce form .form-row .required { color: var(--rouge); text-decoration: none; }
.woocommerce form .form-row.woocommerce-invalid .input-text { border-color: var(--rouge); }
.woocommerce form .form-row.woocommerce-validated .input-text { border-color: var(--acier); }
.woocommerce form .form-row input[type="checkbox"] { accent-color: var(--rouge); inline-size: 1rem; block-size: 1rem; }

/* ── Les boutons : le parallélogramme du site, sans changer le balisage ── */

#contenu .woocommerce button.button,
#contenu .woocommerce button.button.alt,
#contenu .woocommerce a.button,
#contenu .woocommerce a.button.alt,
#contenu .woocommerce input.button,
#contenu .woocommerce input.button.alt,
#contenu .woocommerce .checkout-button,
#contenu .woocommerce #place_order,
#contenu .woocommerce .single_add_to_cart_button,
#contenu .product .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding: var(--e-3) var(--e-6);
  border: 0;
  border-radius: 0;
  background: var(--rouge-surface);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: var(--t-base);
  font-weight: 400;
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  clip-path: polygon(.6rem 0, 100% 0, calc(100% - .6rem) 100%, 0 100%);
  transition: background-color var(--duree-action) var(--sortie), color var(--duree-action) var(--sortie);
}

#contenu .woocommerce button.button:hover,
#contenu .woocommerce button.button.alt:hover,
#contenu .woocommerce a.button:hover,
#contenu .woocommerce a.button.alt:hover,
#contenu .woocommerce input.button:hover,
#contenu .woocommerce .checkout-button:hover,
#contenu .woocommerce #place_order:hover,
#contenu .product .single_add_to_cart_button:hover,
#contenu .woocommerce button.button:focus-visible,
#contenu .woocommerce #place_order:focus-visible { background: var(--blanc); color: var(--rouge-surface); }

#contenu .woocommerce button.button:disabled,
#contenu .woocommerce button.button.disabled,
#contenu .woocommerce button.button.alt:disabled,
#contenu .woocommerce button.button:disabled:hover { background: var(--acier); color: var(--gris); cursor: not-allowed; opacity: 1; }

/* Le bouton secondaire (appliquer un code, mettre à jour) : en contour. */
#contenu .woocommerce .coupon .button,
#contenu .woocommerce button[name="update_cart"] { background: transparent; color: var(--blanc); box-shadow: inset 0 0 0 var(--filet) var(--acier); clip-path: none; }
#contenu .woocommerce .coupon .button:hover,
#contenu .woocommerce button[name="update_cart"]:hover:not(:disabled) { background: transparent; color: var(--or); box-shadow: inset 0 0 0 var(--filet) var(--or); }

/* ── Les messages ────────────────────────────────────────────────────── */

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice,
.woocommerce .woocommerce-form-coupon-toggle .woocommerce-info {
  margin-block-end: var(--e-4);
  padding: var(--e-3) var(--e-4);
  border: var(--filet) solid var(--acier);
  border-inline-start: 3px solid var(--or);
  border-radius: 0;
  background: var(--panneau);
  color: var(--blanc);
  font-size: var(--t-sm);
}
.woocommerce-error { border-inline-start-color: var(--rouge); }
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { display: none; }
.woocommerce-info a, .woocommerce-message a { color: var(--or); }

/* ── Les étapes du tunnel (rendues par inc/tunnel.php) ──────────────── */

.tunnel__etapes { display: flex; gap: var(--e-2); margin: 0 0 var(--e-8); padding: 0; list-style: none; counter-reset: etape; }
.tunnel__etape {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding-block-end: var(--e-2);
  border-block-end: 2px solid var(--acier);
  color: var(--gris);
  font-family: var(--titre);
  font-size: var(--t-xs);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}
.tunnel__etape::before { counter-increment: etape; content: counter(etape, decimal-leading-zero); color: var(--acier); font-size: var(--t-lg); }
.tunnel__etape--faite { border-color: var(--or); color: var(--or); }
.tunnel__etape--faite::before { color: var(--or); }
.tunnel__etape--active { border-color: var(--rouge); color: var(--blanc); }
.tunnel__etape--active::before { color: var(--rouge); }
/* ⚠ Vu à l'écran le 20 septembre 2026 : « 01 02 03 » se lisait « 0023 ». Les
   numéros se touchaient. Ils sont maintenant centrés dans leur tiers. */
@media (max-width: 40rem) {
  .tunnel__etapes { gap: var(--e-4); }
  .tunnel__etape { font-size: 0; gap: 0; justify-content: center; }
  .tunnel__etape::before { font-size: var(--t-base); }
  .tunnel__etape--active { font-size: var(--t-xs); gap: var(--e-2); justify-content: flex-start; }
}

/* ── Le panier ──────────────────────────────────────────────────────── */

#contenu .woocommerce:has(> .woocommerce-cart-form) { display: grid; gap: var(--e-8); align-items: start; }
@media (min-width: 56rem) {
  #contenu .woocommerce:has(> .woocommerce-cart-form) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-notices-wrapper, .woocommerce:has(> .woocommerce-cart-form) > .tunnel__etapes { grid-column: 1 / -1; }
}
.woocommerce:has(> .woocommerce-cart-form) .woocommerce-notices-wrapper:empty { display: none; }

.woocommerce table.shop_table {
  inline-size: 100%;
  margin: 0;
  border: var(--filet) solid var(--acier);
  border-radius: 0;
  border-collapse: collapse;
  background: var(--panneau-creux);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: var(--e-3); border-block-start: var(--filet) solid var(--acier); vertical-align: middle; }
.woocommerce table.shop_table thead th { border-block-start: 0; color: var(--gris); font-family: var(--titre); font-size: var(--t-xs); font-weight: 400; letter-spacing: var(--lettrage-capital); text-transform: uppercase; }
.woocommerce table.shop_table td.product-thumbnail img { inline-size: 4.5rem; block-size: auto; border: var(--filet) solid var(--acier); background: var(--noir); }
.woocommerce table.shop_table td.product-name a { color: var(--blanc); font-family: var(--titre); text-transform: uppercase; text-decoration: none; }
.woocommerce table.shop_table td.product-name a:hover { color: var(--or); }
.woocommerce table.shop_table .product-price, .woocommerce table.shop_table .product-subtotal { color: var(--or); font-variant-numeric: tabular-nums; }
.woocommerce a.remove { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 0; color: var(--gris) !important; font-size: var(--t-xl); }
.woocommerce a.remove:hover { background: transparent; color: var(--rouge) !important; }
.woocommerce .quantity .qty { inline-size: 4rem; text-align: center; }
.woocommerce table.shop_table td.actions { padding-block: var(--e-4); }
.woocommerce table.shop_table td.actions .coupon { display: flex; gap: var(--e-2); float: none; }
.woocommerce table.shop_table td.actions .coupon .input-text { inline-size: 11rem; }
.woocommerce table.shop_table td.actions .coupon label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* ⚠ Pas de `display: flex` sur cette cellule : elle porte un colspan, et
   un flex sur un <td> sort la cellule de l'algorithme du tableau — toute la
   largeur du bloc coupon était attribuée à la PREMIÈRE colonne (671 px pour
   la croix « supprimer », mesuré). On garde la cellule, on flotte le bouton. */
.woocommerce table.shop_table td.actions .coupon { display: inline-flex; vertical-align: middle; }
.woocommerce table.shop_table td.actions > .button { float: inline-end; }
.woocommerce table.shop_table td.actions::after { content: ''; display: table; clear: both; }

.woocommerce .cart-collaterals .cart_totals { float: none; inline-size: 100%; padding: var(--e-4); border: var(--filet) solid var(--acier); border-block-start: 2px solid var(--or); background: var(--panneau-creux); }
.woocommerce .cart_totals h2 { margin: 0 0 var(--e-3); font-family: var(--titre); font-size: var(--t-xl); letter-spacing: var(--lettrage-capital); text-transform: uppercase; }
.woocommerce .cart_totals table.shop_table { border: 0; background: transparent; }
.woocommerce .cart_totals table.shop_table th { color: var(--gris); font-weight: 400; }
.woocommerce .cart_totals .order-total td { color: var(--or); font-family: var(--titre); font-size: var(--t-xl); }
.woocommerce .cart_totals a { color: var(--or); }
.woocommerce .wc-proceed-to-checkout { padding: var(--e-4) 0 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { inline-size: 100%; font-size: var(--t-lg); }
.woocommerce-shipping-calculator { margin-block-start: var(--e-2); }

/* ── La caisse ──────────────────────────────────────────────────────── */

#contenu form.checkout { display: grid; gap: var(--e-8); align-items: start; }
@media (min-width: 60rem) {
  #contenu form.checkout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto 1fr; } /* la hauteur en plus va à la 2e ligne, pas sous le titre « Votre commande » */
  #contenu form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  #contenu form.checkout #order_review_heading, #contenu form.checkout #order_review { grid-column: 2; }
  #contenu form.checkout #order_review { position: sticky; inset-block-start: calc(var(--hauteur-entete) + var(--e-4)); }
}
.woocommerce .col2-set { display: grid; gap: var(--e-6); }
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { float: none; inline-size: 100%; max-inline-size: none; }
#contenu form.checkout h3, #contenu form.checkout #order_review_heading { margin: 0 0 var(--e-4); font-family: var(--titre); font-size: var(--t-xl); letter-spacing: var(--lettrage-capital); text-transform: uppercase; }
#contenu form.checkout h3 label { font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; display: inline-flex; align-items: center; gap: var(--e-2); }
#contenu form.checkout .woocommerce-checkout-review-order-table { background: var(--panneau-creux); }
#contenu form.checkout .woocommerce-checkout-review-order-table .product-name { color: var(--blanc); }
#contenu form.checkout .woocommerce-checkout-review-order-table .order-total td { color: var(--or); font-family: var(--titre); font-size: var(--t-xl); }

#contenu form.checkout #payment { border-radius: 0; background: var(--panneau-creux); border: var(--filet) solid var(--acier); border-block-start: 2px solid var(--or); }
#contenu form.checkout #payment ul.payment_methods { padding: var(--e-4); border-block-end: var(--filet) solid var(--acier); }
#contenu form.checkout #payment ul.payment_methods li { display: grid; gap: var(--e-2); }
#contenu form.checkout #payment ul.payment_methods li label { color: var(--blanc); font-family: var(--titre); text-transform: uppercase; letter-spacing: var(--lettrage-capital); font-size: var(--t-sm); }
#contenu form.checkout #payment input[type="radio"] { accent-color: var(--rouge); }
#contenu form.checkout #payment div.payment_box { border-radius: 0; background: var(--noir); color: var(--gris); border: var(--filet) solid var(--acier); }
#contenu form.checkout #payment div.payment_box::before { border-color: transparent transparent var(--acier) transparent; }
#contenu form.checkout #payment .place-order { padding: var(--e-4); }
#contenu form.checkout .woocommerce-privacy-policy-text { color: var(--gris); font-size: var(--t-xs); }
#contenu form.checkout .woocommerce-terms-and-conditions-wrapper a, #contenu form.checkout .woocommerce-privacy-policy-text a { color: var(--or); }
#contenu form.checkout #place_order { inline-size: 100%; float: none; font-size: var(--t-lg); margin-block-start: var(--e-3); }

/* Les garanties sous le bouton (inc/tunnel.php). */
.tunnel__garanties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); margin: var(--e-4) 0 0; padding: 0; list-style: none; }
.tunnel__garantie { padding: var(--e-2) var(--e-3); border: var(--filet) solid var(--acier); background: var(--panneau); }
.tunnel__garantie b { display: block; color: var(--or); font-family: var(--titre); font-size: var(--t-xs); font-weight: 400; letter-spacing: var(--lettrage-capital); text-transform: uppercase; }
.tunnel__garantie span { color: var(--gris); font-size: var(--t-xs); }

/* ── La fiche produit ───────────────────────────────────────────────── */

#contenu > .product { display: grid; gap: var(--e-8); padding-block: var(--e-8) var(--e-12); }
@media (min-width: 56rem) {
  #contenu > .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  #contenu > .product > .woocommerce-tabs, #contenu > .product > .related, #contenu > .product > .up-sells { grid-column: 1 / -1; }
}
#contenu .product .woocommerce-product-gallery { float: none; inline-size: 100% !important; margin: 0; }
#contenu .product .woocommerce-product-gallery img { inline-size: 100%; block-size: auto; border: var(--filet) solid var(--acier); background: var(--noir); }
#contenu .product .woocommerce-product-gallery__trigger { display: none; }
#contenu .product .summary { float: none; inline-size: 100%; margin: 0; }
#contenu .product .summary .product_title { margin: 0 0 var(--e-3); font-size: var(--t-3xl); line-height: 1.02; text-transform: uppercase; }
#contenu .product .summary .price { margin: 0 0 var(--e-4); color: var(--or); font-family: var(--titre); font-size: var(--t-2xl); }
#contenu .product .summary .price del { color: var(--gris); font-size: .6em; }
#contenu .product .summary .woocommerce-product-details__short-description { margin: 0 0 var(--e-6); color: var(--gris); font-size: var(--t-lg); line-height: 1.6; }
#contenu .product .summary form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--e-2); margin: 0 0 var(--e-6); }
#contenu .product .summary form.cart .quantity { float: none; margin: 0; }
#contenu .product .summary form.cart .single_add_to_cart_button { flex: 1 1 14rem; font-size: var(--t-lg); }
#contenu .product .summary .product_meta { padding-block-start: var(--e-4); border-block-start: var(--filet) solid var(--acier); color: var(--gris); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; }
#contenu .product .summary .product_meta > span { display: block; margin-block-end: .3rem; }
#contenu .product .summary .product_meta a { color: var(--or); text-decoration: none; }
#contenu .product .stock.out-of-stock { color: var(--rouge); }

#contenu .product .woocommerce-tabs ul.tabs { display: flex; gap: var(--e-4); margin: 0 0 var(--e-4); padding: 0; border-block-end: var(--filet) solid var(--acier); overflow: visible; }
#contenu .product .woocommerce-tabs ul.tabs::before, #contenu .product .woocommerce-tabs ul.tabs::after, #contenu .product .woocommerce-tabs ul.tabs li::before, #contenu .product .woocommerce-tabs ul.tabs li::after { display: none; }
#contenu .product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
#contenu .product .woocommerce-tabs ul.tabs li a { display: block; padding: var(--e-2) 0; color: var(--gris); font-family: var(--titre); font-size: var(--t-sm); font-weight: 400; letter-spacing: var(--lettrage-capital); text-transform: uppercase; border-block-end: 2px solid transparent; margin-block-end: -1px; }
#contenu .product .woocommerce-tabs ul.tabs li.active a { color: var(--blanc); border-color: var(--rouge); }
#contenu .product .woocommerce-tabs .panel { padding: 0; color: var(--gris); line-height: 1.65; }
#contenu .product .woocommerce-tabs .panel > h2 { font-size: var(--t-xl); margin: 0 0 var(--e-3); text-transform: uppercase; }
#contenu .product .woocommerce-tabs .panel p { max-inline-size: var(--mesure); }
#contenu .product .related > h2, #contenu .product .up-sells > h2 { font-size: var(--t-2xl); text-transform: uppercase; margin: var(--e-8) 0 var(--e-4); }

/* ── La confirmation ───────────────────────────────────────────────── */

#contenu .woocommerce-order .woocommerce-thankyou-order-received { margin: 0 0 var(--e-2); color: var(--or); font-family: var(--titre); font-size: var(--t-3xl); text-transform: uppercase; }
#contenu .woocommerce-order .tunnel__merci { margin: 0 0 var(--e-6); color: var(--gris); font-size: var(--t-lg); max-inline-size: var(--mesure); }
#contenu .woocommerce-order ul.woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e-2); margin: 0 0 var(--e-8); padding: 0; list-style: none; }
#contenu .woocommerce-order ul.woocommerce-order-overview li { float: none; margin: 0; padding: var(--e-3); border: var(--filet) solid var(--acier) !important; background: var(--panneau-creux); color: var(--gris); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; }
#contenu .woocommerce-order ul.woocommerce-order-overview li strong { display: block; margin-block-start: .3rem; color: var(--blanc); font-family: var(--titre); font-size: var(--t-lg); letter-spacing: 0; }
#contenu .woocommerce-order .woocommerce-order-details, #contenu .woocommerce-order .woocommerce-customer-details { margin-block-end: var(--e-8); }
#contenu .woocommerce-order .woocommerce-order-details__title, #contenu .woocommerce-order .woocommerce-column__title { font-family: var(--titre); font-size: var(--t-xl); text-transform: uppercase; letter-spacing: var(--lettrage-capital); margin: 0 0 var(--e-3); }
#contenu .woocommerce-order address { font-style: normal; color: var(--gris); line-height: 1.6; }
#contenu .woocommerce-order .woocommerce-table--order-details tfoot th { color: var(--gris); font-weight: 400; }
#contenu .woocommerce-order .woocommerce-table--order-details tfoot tr:last-child td { color: var(--or); font-family: var(--titre); font-size: var(--t-lg); }

.tunnel__suite { margin: 0 0 var(--e-8); padding: 0; list-style: none; display: grid; gap: var(--e-3); counter-reset: suite; }
@media (min-width: 48rem) { .tunnel__suite { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tunnel__suite-titre { font-family: var(--titre); font-size: var(--t-xl); text-transform: uppercase; letter-spacing: var(--lettrage-capital); margin: 0 0 var(--e-3); }
.tunnel__suite li { position: relative; padding: var(--e-4) var(--e-4) var(--e-4) 3.4rem; border: var(--filet) solid var(--acier); background: var(--panneau-creux); }
.tunnel__suite li::before { counter-increment: suite; content: counter(suite, decimal-leading-zero); position: absolute; inset-block-start: var(--e-3); inset-inline-start: var(--e-3); color: var(--rouge); font-family: var(--titre); font-size: var(--t-xl); }
.tunnel__suite b { display: block; margin-block-end: .3rem; color: var(--blanc); font-family: var(--titre); font-weight: 400; text-transform: uppercase; letter-spacing: var(--lettrage-capital); font-size: var(--t-sm); }
.tunnel__suite span { color: var(--gris); font-size: var(--t-sm); line-height: 1.5; }

.tunnel__partage { margin: 0 0 var(--e-8); padding: var(--e-4); border: var(--filet) solid var(--acier); border-inline-start: 3px solid var(--or); background: var(--panneau); }
.tunnel__partage p { margin: 0 0 var(--e-3); color: var(--gris); font-size: var(--t-sm); }
.tunnel__partage-liens { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.tunnel__partage-liens a { display: inline-flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3); border: var(--filet) solid var(--acier); color: var(--blanc); font-family: var(--titre); font-size: var(--t-xs); letter-spacing: var(--lettrage-capital); text-transform: uppercase; text-decoration: none; transition: border-color var(--duree-action) var(--sortie), color var(--duree-action) var(--sortie); }
.tunnel__partage-liens a:hover, .tunnel__partage-liens a:focus-visible { border-color: var(--or); color: var(--or); }

/* Un <table> ne rétrécit pas sous la largeur de son contenu : sans ceci il
   débordait de sa colonne SOUS le panneau des totaux (vu à 1440). */
.woocommerce-cart-form { min-inline-size: 0; overflow-x: auto; }
.woocommerce table.shop_table td.product-remove { inline-size: 3rem; }
.woocommerce table.shop_table td.product-thumbnail { inline-size: 5.5rem; }
.woocommerce table.shop_table td.product-quantity { inline-size: 6rem; }
.woocommerce table.shop_table td.product-name { min-inline-size: 10rem; }
#contenu .woocommerce .coupon .button,
#contenu .woocommerce button[name="update_cart"] { white-space: nowrap; padding-inline: var(--e-4); }

/* Les champs : WooCommerce écrit `.woocommerce form .form-row input.input-text`
   (0,3,2) — plus lourd que `.woocommerce .input-text`. On pèse plus lourd que lui. */
#contenu .woocommerce form .form-row input.input-text,
#contenu .woocommerce form .form-row textarea,
#contenu .woocommerce form .form-row select,
#contenu .woocommerce .input-text,
#contenu .woocommerce .qty {
  inline-size: 100%;
  padding: .6rem .8rem;
  border: var(--filet) solid var(--acier);
  border-radius: 0;
  background: var(--noir);
  color: var(--blanc);
  font-size: var(--t-base);
  line-height: 1.4;
}
#contenu .woocommerce form .form-row input.input-text::placeholder,
#contenu .woocommerce form .form-row textarea::placeholder { color: var(--gris); opacity: .7; }
#contenu .woocommerce .qty { inline-size: 4rem; }

/* Les moyens de paiement : le bouton radio reste sur la ligne de son libellé. */
#contenu form.checkout #payment ul.payment_methods li { display: block; }
#contenu form.checkout #payment ul.payment_methods li > label { display: inline-flex; align-items: center; gap: var(--e-2); margin: 0; cursor: pointer; }
#contenu form.checkout #payment ul.payment_methods li > input[type="radio"] { display: inline-block; vertical-align: middle; margin: 0 var(--e-2) 0 0; }
#contenu form.checkout #payment ul.payment_methods li img { vertical-align: middle; max-block-size: 1.6rem; }
#contenu form.checkout #payment div.payment_box { margin-block-start: var(--e-2); }

/* Les garanties : pas de puce, quelle que soit la règle de liste de WooCommerce. */
#contenu ul.tunnel__garanties { list-style: none; padding: 0; }
#contenu ul.tunnel__garanties li { list-style: none; }

/* ── Les gages de la fiche : la preuve à côté de la demande ─────────────
   Relevé du 20 septembre 2026 : délai, port et retour n'existaient que dans
   le pied de page. 44 % des boutiques cachent leur politique de retour quand
   60 % des acheteurs la cherchent (Baymard, 2026). */
#contenu .product .summary .fiche-gages { margin: 0 0 var(--e-6); padding: var(--e-4); list-style: none; border: var(--filet) solid var(--acier); border-radius: 2px; display: grid; gap: var(--e-2); }
#contenu .product .summary .fiche-gages__ligne { position: relative; padding-inline-start: var(--e-6); color: var(--gris); font-size: var(--t-sm); line-height: 1.45; }
#contenu .product .summary .fiche-gages__ligne::before { content: ""; position: absolute; inset-block-start: .42em; inset-inline-start: 0; inline-size: .7rem; block-size: .4rem; border-inline-start: 2px solid var(--or); border-block-end: 2px solid var(--or); transform: rotate(-45deg); }

/* ── La taille du t-shirt, sur un pack ─────────────────────────────────
   Le pack ULTIME contient un t-shirt ; la boutique en vend six tailles. Ce
   choix est posé au-dessus du bouton, à la place exacte où le sélecteur de
   déclinaison apparaît sur les fiches variables : le geste est le même, donc
   il doit être au même endroit. Il est obligatoire — sans lui, on prépare un
   colis à l'aveugle. */
#contenu .product .summary .pack-taille { margin: 0 0 var(--e-4); display: grid; gap: var(--e-2); }
#contenu .product .summary .pack-taille__libelle { color: var(--or); font-family: var(--titre); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: var(--lettrage-capital); }
#contenu .product .summary .pack-taille__choix { inline-size: 100%; max-inline-size: 22rem; }
#contenu .product .summary .pack-taille__note { margin: 0; color: var(--gris); font-size: var(--t-xs); line-height: 1.45; }

/* ── « Votre enfant réclame la suite ? » — la deuxième vente ──────────── */
#contenu .product .summary .fiche-suite { margin: var(--e-6) 0 0; padding-block-start: var(--e-4); border-block-start: var(--filet) solid var(--acier); }
#contenu .product .summary .fiche-suite__question { margin: 0 0 var(--e-1); color: var(--gris); font-size: var(--t-sm); }
#contenu .product .summary .fiche-suite__lien { color: var(--or); font-family: var(--titre); font-size: var(--t-lg); text-transform: uppercase; letter-spacing: var(--lettrage-capital); text-decoration: none; border-block-end: 1px solid transparent; transition: border-color var(--duree-action); }
#contenu .product .summary .fiche-suite__lien:hover, #contenu .product .summary .fiche-suite__lien:focus-visible { border-block-end-color: var(--or); }

/* ── Le formulaire d'avis : il vient de WordPress, pas du thème ─────────
   Relevé le 20 septembre 2026, juste avant la campagne d'avis : les champs
   « Nom » et « E-mail » s'affichaient en BLANC PLEIN sur le noir du site, et
   les étoiles en rouge — la couleur réservée aux appels à l'action. Un
   formulaire qui ne ressemble pas au site fait douter de l'endroit où l'on
   tape, et c'est la page où l'on va demander un service à 3 318 clients. */
#contenu #reviews #respond input[type="text"],
#contenu #reviews #respond input[type="email"],
#contenu #reviews #respond input[type="url"],
#contenu #reviews #respond textarea {
  inline-size: 100%;
  padding: var(--e-3);
  border: var(--filet) solid var(--acier);
  background: var(--noir);
  color: var(--blanc);
  font-family: inherit;
  font-size: var(--t-base);
  line-height: 1.5;
  transition: border-color var(--duree-action) var(--sortie);
}
#contenu #reviews #respond input[type="text"]:focus-visible,
#contenu #reviews #respond input[type="email"]:focus-visible,
#contenu #reviews #respond input[type="url"]:focus-visible,
#contenu #reviews #respond textarea:focus-visible { border-color: var(--or); outline: var(--filet) solid var(--or); outline-offset: 2px; }
#contenu #reviews #respond label { display: block; margin-block-end: var(--e-2); color: var(--gris); font-size: var(--t-sm); }
#contenu #reviews #respond .comment-form-cookies-consent { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); align-items: start; color: var(--gris); font-size: var(--t-sm); }
#contenu #reviews #respond .comment-form-cookies-consent input { inline-size: auto; }

/* Les étoiles prennent l'or des prix : la note est une valeur, pas un bouton. */
#contenu #reviews p.stars a { color: var(--or); }
#contenu .star-rating, #contenu .woocommerce-product-rating .star-rating { color: var(--or); }

/* ── La confirmation : « en attendant le colis » ─────────────────────────
   Le titre de la page porte désormais « Commande confirmée » ; la ligne que
   WooCommerce ajoutait ferait doublon et laisse un paragraphe vide. */
/* ⚠ Pas `:empty` — WooCommerce laisse une espace dans le paragraphe, et le
   sélecteur ne mord pas : un cadre vide restait sous le titre. Le titre de la
   page porte désormais « Commande confirmée ! ». */
#contenu .woocommerce-thankyou-order-received { display: none; }
#contenu .tunnel__attente { margin-block-start: var(--e-8); padding-block-start: var(--e-6); border-block-start: var(--filet) solid var(--acier); display: grid; gap: var(--e-3); justify-items: start; }
#contenu .tunnel__attente p { max-inline-size: var(--mesure); color: var(--gris); }
#contenu .tunnel__avis { font-size: var(--t-sm); }

/* ── Le logo Revolut était noir sur noir ────────────────────────────────
   Relevé à la caisse le 21 septembre 2026 : `revolut_pay.svg` est un logo
   monochrome sombre, fourni par l'extension de paiement. Sur le fond noir du
   tunnel, il ne restait qu'un « R » à peine perceptible à côté de deux
   concurrents parfaitement lisibles — Bancontact et les cartes. Un moyen de
   paiement qu'on ne voit pas est un moyen de paiement qu'on n'utilise pas.
   On l'inverse, lui seul : les autres logos sont en couleur et n'ont besoin
   de rien. */
#contenu form.checkout ul.payment_methods img[src*="revolut"] {
  filter: invert(1);
}

/* ── Deux défauts du panier, relevés le 21 septembre 2026 ───────────────

   1 · « Vous serez peut-être intéressé par… » s'affichait au-dessus de deux
   cartes VIDES : le thème remplace les actions de la boucle WooCommerce par
   les siennes, et la boucle des ventes croisées ne les reçoit pas. Le bloc
   est retiré côté serveur (inc/boutique.php) plutôt que masqué ici : masquer
   aurait quand même chargé deux produits pour rien. */

/* 2 · Le bouton « Appliquer le code promo » était coupé : 157 px de place
   pour 177 px de texte, la dernière lettre tombait hors du cadre. Le
   formulaire passe en colonne dès qu'il manque de largeur, et le bouton ne
   se laisse plus rogner. */
#contenu .woocommerce form.woocommerce-cart-form .coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
}

#contenu .woocommerce form.woocommerce-cart-form .coupon .input-text { flex: 1 1 12rem; }

#contenu .woocommerce form.woocommerce-cart-form .coupon .button {
  flex: 0 0 auto;
  white-space: nowrap;
}


/* ═══ LES BOUCLES QUI NE SONT PAS LA BOUTIQUE ═════════════════════════
   Ventes incitatives, produits liés, ventes croisées : WooCommerce rend un
   `<ul class="products columns-N">` que sa propre feuille mettrait en colonnes
   — feuille que le thème ne charge pas. Sans règle, les cartes s'empilaient en
   liste. Voir `woocommerce/content-product.php` pour le contenu des cartes.
   ══════════════════════════════════════════════════════════════════ */

.up-sells ul.products,
.related ul.products,
.cross-sells ul.products {
  display: grid;
  /* auto-FILL, pas auto-fit : une seule suggestion doit garder la taille
     d une carte, pas s etaler sur 1088 px de large. */
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: var(--e-6);
  margin: var(--e-6) 0 0;
  padding: 0;
  list-style: none;
}

/* ⚠ **`woocommerce-layout.css` est chargé sur les fiches produit**, et il
   pose `float: left; width: 22.05%` sur chaque `li.product` — pensé pour sa
   grille à lui, en flottants. Dans une grille CSS le flottant est ignoré, mais
   pas la largeur : mesuré le 21 septembre, les cartes faisaient 76 px dans une
   colonne de 347. Il faut donc passer devant lui en spécificité — `.woocommerce`
   en tête suffit, et c'est plus honnête qu'un `!important`. */
/* ⚠ **Le clearfix de WooCommerce devient une CASE de la grille.**
   `woocommerce-layout.css` pose `ul.products::before/::after { content: " " }`
   pour dégager ses flottants. Dans une grille CSS, un pseudo-élément généré
   est un enfant comme un autre : mesuré le 21 septembre, la seule carte de
   « Vous aimerez peut-être aussi… » était poussée en DEUXIÈME colonne, la
   première étant occupée par un vide de 347 px. */
.woocommerce .up-sells ul.products::before,
.woocommerce .up-sells ul.products::after,
.woocommerce .related ul.products::before,
.woocommerce .related ul.products::after,
.woocommerce .cross-sells ul.products::before,
.woocommerce .cross-sells ul.products::after { content: none; }

.woocommerce .up-sells ul.products > li.product,
.woocommerce .related ul.products > li.product,
.woocommerce .cross-sells ul.products > li.product {
  display: block;
  float: none;
  inline-size: 100%;
  min-inline-size: 0;
  margin: 0;
}

.up-sells > h2,
.related > h2,
.cross-sells > h2 {
  margin-block-start: var(--e-12);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: var(--t-2xl);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}

/* Le point de retrait choisi, sur la page de remerciement (recette du 09/10/2026). */
.tunnel__point {
  margin-block: var(--e-6);
  padding: var(--e-4);
  border: var(--filet) solid var(--acier);
  border-inline-start: 4px solid var(--or);
  background: var(--panneau);
}

.tunnel__point-titre { margin-block-end: var(--e-2); font-size: var(--t-xl); }
.tunnel__point-adresse { margin: 0 0 var(--e-2); line-height: 1.5; }
.tunnel__point-note { margin: 0; color: var(--gris); font-size: var(--t-sm); }
.tunnel__point-suivi { margin: var(--e-2) 0 0; }

/* ── Mon compte (connecté) : jamais habillé avant le tour du 9/10/2026 ── */

#contenu .woocommerce:has(> .woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--e-8);
  align-items: start;
}
.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-inline-start: var(--filet) solid var(--acier);
}
.woocommerce-MyAccount-navigation a {
  display: block;
  margin-inline-start: calc(-1 * var(--filet));
  padding: var(--e-2) var(--e-4);
  border-inline-start: 3px solid transparent;
  color: var(--gris);
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: var(--lettrage-capital);
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--duree-action), border-color var(--duree-action);
}
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus-visible { color: var(--blanc); }
.woocommerce-MyAccount-navigation .is-active a { border-inline-start-color: var(--or); color: var(--or); }
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--gris); opacity: .8; }

.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content mark { background: none; color: var(--or); font-weight: 600; }
.woocommerce-MyAccount-content address,
.woocommerce-customer-details address {
  padding: var(--e-4);
  border: var(--filet) solid var(--acier);
  background: var(--panneau);
  font-style: normal;
  line-height: 1.6;
}

/* Un message avec un bouton (vérifier l'adresse, aucune commande) : le bouton passe dessous. */
.woocommerce-info .button, .woocommerce-message .button { float: none; display: inline-flex; margin: var(--e-3) 0 0; }
.woocommerce-info:has(.button), .woocommerce-message:has(.button) { display: flex; flex-direction: column-reverse; align-items: flex-start; }

@media (max-width: 47.99rem) {
  #contenu .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
  .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    overflow-x: auto;
    border-inline-start: 0;
    border-block-end: var(--filet) solid var(--acier);
    scrollbar-width: none;
  }
  .woocommerce-MyAccount-navigation li { flex: 0 0 auto; }
  .woocommerce-MyAccount-navigation a { margin: 0 0 calc(-1 * var(--filet)); padding: var(--e-3); border-inline-start: 0; border-block-end: 3px solid transparent; white-space: nowrap; }
  .woocommerce-MyAccount-navigation .is-active a { border-block-end-color: var(--or); }
}

/* ── Caisse : « Comment recevoir votre colis ? » (module propulse-relais, 9/10/2026) ──
   Le module pose la structure ; ici, seulement les couleurs et le titrage de la caisse. */

#contenu .propulse-relais-livraison {
  --propulse-relais-accent: var(--or);
  --propulse-relais-fond: var(--panneau);
  --propulse-relais-texte: var(--blanc);
  --propulse-relais-discret: var(--gris);
  --propulse-relais-filet: var(--acier);
  --propulse-relais-alerte: var(--rouge);
  --propulse-relais-alerte-halo: color-mix(in srgb, var(--rouge) 30%, transparent);
  --propulse-relais-duree: var(--duree-entree);
  margin-block-start: var(--e-8);
  scroll-margin-block-start: calc(var(--hauteur-entete) + var(--e-6));
}
#contenu form.checkout .propulse-relais-livraison__titre {
  margin: 0 0 var(--e-4);
  font-family: var(--titre);
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  color: var(--blanc);
}
#contenu .propulse-relais-mode { border-radius: 0; }
#contenu .propulse-relais-mode__nom { font-family: var(--titre); font-size: var(--t-lg); font-weight: 400; letter-spacing: var(--lettrage-capital); text-transform: uppercase; }
#contenu .propulse-relais-mode__prix { color: var(--or); font-family: var(--titre); font-size: var(--t-lg); font-weight: 400; }
#contenu .propulse-relais-mode__logo { background: var(--blanc); padding: 2px; }
#contenu .propulse-relais-livraison__point { border-radius: 0; }
#contenu .propulse-relais-livraison__manque { color: var(--blanc); }
#contenu .propulse-relais-livraison .propulse-relais-fiche .propulse-relais-enseigne { color: var(--blanc); }