/**
 * 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 ═══════════════════════════════════════ */

.tunnel__etapes {
  display: flex;
  gap: var(--e-2);
  margin-block-end: var(--e-8);
  list-style: none;
}

.tunnel__etape {
  flex: 1;
  padding-block-end: var(--e-2);
  border-block-end: 2px solid var(--acier);
  color: var(--gris);
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}

.tunnel__etape--active { border-block-end-color: var(--rouge); color: var(--blanc); }
.tunnel__etape--faite  { border-block-end-color: var(--or); color: var(--or); }


/* ═══════════════════════════════════════════════════════════════════════
   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); }
@media (max-width: 40rem) { .tunnel__etape { font-size: 0; gap: 0; } .tunnel__etape::before { font-size: var(--t-base); } .tunnel__etape--active { font-size: var(--t-xs); gap: var(--e-2); } }

/* ── 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); }
  #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; }