/* ——— Panier et commande ———
   Les deux pages sont faites des blocs WooCommerce (rendus en JavaScript) : on ne touche
   qu'à l'habillage, jamais au balisage, pour que les extensions de paiement restent maîtresses
   de leur affichage. */

.page-tunnel .page-simple__contenu { max-width: var(--contenu); }
.page-tunnel .page-simple__titre { margin-bottom: 8px; }

.page-tunnel .wc-block-cart,
.page-tunnel .wc-block-checkout,
.page-tunnel .wp-block-woocommerce-cart,
.page-tunnel .wp-block-woocommerce-checkout { width: 100%; max-width: none; margin: 0; }

/* Typographie commune aux deux tunnels. */
.page-tunnel .wc-block-components-title,
.page-tunnel .wc-block-cart__totals-title,
.page-tunnel .wc-block-checkout__actions_row,
.page-tunnel .wc-block-components-product-name,
.page-tunnel .wc-block-components-totals-item__label,
.page-tunnel .wc-block-components-totals-item__value { font-family: var(--police-texte); color: var(--noir); }

.page-tunnel .wc-block-components-title { font-family: var(--police-titre); color: var(--titre); }

/* Deux colonnes : articles à gauche, récapitulatif à droite. */
@media (min-width: 1024px) {
  .page-tunnel .wc-block-cart__main,
  .page-tunnel .wc-block-checkout__main { flex: 1 1 auto; max-width: none; padding-right: 40px; }
  .page-tunnel .wc-block-cart__sidebar,
  .page-tunnel .wc-block-checkout__sidebar { flex: 0 0 380px; max-width: 380px; }
  .page-tunnel .wc-block-components-sidebar { position: sticky; top: 24px; }
}

/* Récapitulatif : encadré de la charte. */
.page-tunnel .wc-block-components-sidebar .wc-block-components-totals-wrapper,
.page-tunnel .wc-block-cart__totals-title { padding-inline: 24px; }
.page-tunnel .wc-block-components-sidebar {
  padding: 8px 0 24px;
  border: 1px solid var(--gris-bordure);
  border-radius: var(--r-carte);
  background: var(--blanc);
}
.page-tunnel .wc-block-cart__totals-title { padding-top: 20px; font: 600 13px/18px var(--police-texte); letter-spacing: .04em; color: var(--titre); }
.page-tunnel .wc-block-components-totals-item { font: 400 15px/22px var(--police-texte); }
.page-tunnel .wc-block-components-totals-footer-item,
.page-tunnel .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font: 600 20px/26px var(--police-titre); color: var(--titre); }

/* Lignes du panier. */
.page-tunnel .wc-block-cart-items__header { font: 600 13px/18px var(--police-texte); letter-spacing: .04em; color: rgba(58, 57, 53, .6); }
.page-tunnel .wc-block-cart-items__row td { padding-block: 20px; border-top: 1px solid #F0F0F0; }
.page-tunnel .wp-block-woocommerce-cart .wc-block-cart-item__image { width: 112px; }
.page-tunnel .wp-block-woocommerce-cart .wc-block-cart-item__image img { width: 96px; height: auto; max-width: none; border-radius: var(--r-bloc); background: var(--gris-champ); }
.page-tunnel .wc-block-components-product-name { font: 600 16px/22px var(--police-texte); text-decoration: none; }
.page-tunnel .wc-block-components-product-name:hover { text-decoration: underline; }
.page-tunnel .wc-block-cart-item__prices .wc-block-components-product-price__value { font: 600 15px/22px var(--police-texte); }
.page-tunnel .wc-block-components-product-metadata { font: 400 14px/20px var(--police-texte); color: #6B6B6B; }

/* Sélecteur de quantité : même pilule que dans le tiroir. */
.page-tunnel .wc-block-components-quantity-selector { border: 1px solid #E2E2E2; border-radius: 999px; }
.page-tunnel .wc-block-components-quantity-selector::after { display: none; }
.page-tunnel .wc-block-components-quantity-selector__input { font: 600 14px/20px var(--police-texte); }
.page-tunnel .wc-block-components-quantity-selector__button { font-size: 16px; color: var(--noir); }
.page-tunnel .wc-block-components-quantity-selector__button:hover { background: var(--gris-champ); }

/* Boutons : charte du thème. */
.page-tunnel .wc-block-components-button:not(.is-link) {
  min-height: 50px;
  padding-inline: 24px;
  border-radius: var(--r-pilule);
  background: var(--corail);
  color: var(--blanc);
  font: 500 16px/20px var(--police-texte);
}
.page-tunnel .wc-block-components-button:not(.is-link):hover { background: var(--corail-survol); }
.page-tunnel .wc-block-components-button.is-link { color: var(--violet); }
.page-tunnel .wc-block-cart__submit-button,
.page-tunnel .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button { width: 100%; }
/* Le bouton ne colle pas aux bords de l'encadré. */
.page-tunnel .wc-block-cart__submit-container { padding-inline: 24px; }
.page-tunnel .wc-block-cart__submit-container { padding-top: 16px; }

/* Le titre du récapitulatif porte un filet haut qui double le bord de l'encadré. */
.page-tunnel .wc-block-components-checkout-order-summary__title,
.page-tunnel .wc-block-components-sidebar > *:first-child { border-top: 0 !important; }

/* Un seul filet entre deux sections : les blocs cumulent un trait bas et un trait haut. */
.page-tunnel .wp-block-woocommerce-cart-order-summary-block,
.page-tunnel .wp-block-woocommerce-checkout-order-summary-block { border-top: 0 !important; border-bottom: 0 !important; }
.page-tunnel .wc-block-components-sidebar > *:last-child,
.page-tunnel .wc-block-components-totals-wrapper:last-child { border-bottom: 0; }

/* Champs de saisie (code promo, coordonnées). */
.page-tunnel .wc-block-components-text-input input[type="text"],
.page-tunnel .wc-block-components-text-input input[type="email"],
.page-tunnel .wc-block-components-text-input input[type="tel"],
.page-tunnel .wc-block-components-text-input input[type="number"],
.page-tunnel .wc-block-components-textarea,
.page-tunnel .wc-block-components-combobox-control input {
  border: 1px solid var(--gris-bordure);
  border-radius: var(--r-petit);
  background: var(--blanc);
  font: 400 16px/22px var(--police-texte);
}
.page-tunnel .wc-block-components-text-input input:focus,
.page-tunnel .wc-block-components-combobox-control input:focus { outline: 2px solid var(--violet); outline-offset: 1px; }

/* Blocs dépliants (code promo, moyens de paiement). */
.page-tunnel .wc-block-components-panel__button { font: 500 15px/22px var(--police-texte); color: var(--violet); }

/* Étapes de la commande. */
.page-tunnel .wc-block-checkout__form .wc-block-components-checkout-step {
  padding: 24px;
  border: 1px solid var(--gris-bordure);
  border-radius: var(--r-carte);
  background: var(--blanc);
}
.page-tunnel .wc-block-components-checkout-step__title { font: 600 18px/24px var(--police-titre); color: var(--titre); }
.page-tunnel .wc-block-components-checkout-step__description { font: 400 14px/20px var(--police-texte); color: #6B6B6B; }

/* Panier vide. */
.page-tunnel .wp-block-woocommerce-empty-cart-block { text-align: center; }

/* Un peu d'air avant le pied de page, même quand le panier tient en une ligne. */
.page-tunnel { padding-bottom: 96px; }

@media (max-width: 1023px) {
  .page-tunnel { padding-bottom: 48px; }
  .page-tunnel .wc-block-components-sidebar { margin-top: 24px; }
  .page-tunnel .wp-block-woocommerce-cart .wc-block-cart-items { width: 100%; }
  .page-tunnel .wp-block-woocommerce-cart .wc-block-cart-item__image img { width: 72px; }

  /* Sur petit écran, les blocs gardent trois colonnes et le total déborde de la page.
     On replie la ligne en deux colonnes, total sous le produit. Les « !important » sont
     ici nécessaires : la grille de WooCommerce est elle-même déclarée en !important. */
  .page-tunnel .wp-block-woocommerce-cart .wc-block-cart-items__row { grid-template-columns: 72px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; }
  .page-tunnel .wp-block-woocommerce-cart .wc-block-cart-item__image { grid-column: 1 !important; grid-row: 1 / span 2 !important; width: auto; }
  .page-tunnel .wp-block-woocommerce-cart .wc-block-cart-item__product { grid-column: 2 !important; grid-row: 1 !important; }
  .page-tunnel .wp-block-woocommerce-cart .wc-block-cart-item__total { grid-column: 2 !important; grid-row: 2 !important; justify-self: start !important; width: auto !important; padding-top: 4px !important; }
}