/* ═══════════════════════════════════════════════════════════
   L'Atelier de la Source — Page Panier (cart.css)
   Harmonisation avec la charte graphique du site
   ═══════════════════════════════════════════════════════════ */

:root {
  --als-accent       : #00ABB2;
  --als-accent-dark  : #004C50;
  --als-accent-light : #e8f6f7;
  --als-text         : #2b2b2b;
  --als-muted        : #6b7a7b;
  --als-border       : #e8eeef;
  --als-radius       : 10px;
  --als-font         : 'Montserrat', sans-serif;
}

/* ══════════════════════════════════════════════════════════
   1. LAYOUT GLOBAL — pleine largeur, pas de sidebar
   ══════════════════════════════════════════════════════════ */
body.woocommerce-cart #left-area,
body.woocommerce-cart #main-content .container,
body.woocommerce-checkout #left-area,
body.woocommerce-checkout #main-content .container {
  width     : 100% !important;
  max-width : 100% !important;
  float     : none !important;
  padding   : 0 40px !important;
  box-sizing: border-box !important;
}

body.woocommerce-cart #sidebar,
body.woocommerce-checkout #sidebar {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   2. TITRE DE PAGE
   ══════════════════════════════════════════════════════════ */
body.woocommerce-cart h1.page-title,
body.woocommerce-cart .entry-title,
body.woocommerce-checkout h1.page-title,
body.woocommerce-checkout .entry-title {
  font-family: var(--als-font) !important;
  font-size  : clamp(1.6rem, 3vw, 2.2rem) !important;
  font-weight: 700 !important;
  color      : var(--als-text) !important;
  margin-bottom: 28px !important;
}

/* ══════════════════════════════════════════════════════════
   3. TABLEAU DU PANIER
   ══════════════════════════════════════════════════════════ */
.woocommerce-cart-form__contents,
table.woocommerce-cart-form__contents,
.woocommerce table.shop_table {
  width       : 100% !important;
  border      : 1px solid var(--als-border) !important;
  border-radius: var(--als-radius) !important;
  border-spacing: 0 !important;
  border-collapse: separate !important;
  overflow    : hidden !important;
  font-family : var(--als-font) !important;
  font-size   : 14px !important;
  background  : #fff !important;
}

/* En-tête du tableau */
.woocommerce table.shop_table th,
.woocommerce table.cart th {
  background  : var(--als-accent-light) !important;
  color       : var(--als-accent-dark) !important;
  font-weight : 700 !important;
  font-size   : 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding     : 14px 16px !important;
  border-bottom: 2px solid var(--als-border) !important;
}

/* Cellules */
.woocommerce table.shop_table td,
.woocommerce table.cart td {
  padding     : 18px 16px !important;
  border-top  : 1px solid var(--als-border) !important;
  vertical-align: middle !important;
  color       : var(--als-text) !important;
}

.woocommerce table.cart tr:first-child td { border-top: none !important; }

/* Nom du produit */
.woocommerce table.cart td.product-name {
  font-weight: 600 !important;
}
.woocommerce table.cart td.product-name a {
  color          : var(--als-text) !important;
  text-decoration: none !important;
  transition     : color .2s !important;
}
.woocommerce table.cart td.product-name a:hover {
  color: var(--als-accent) !important;
}

/* Miniature produit dans le panier */
.woocommerce table.cart td.product-thumbnail img {
  width        : 72px !important;
  height       : 72px !important;
  object-fit   : cover !important;
  border-radius: 8px !important;
  border       : 1px solid var(--als-border) !important;
}

/* Prix */
.woocommerce table.cart td.product-price,
.woocommerce table.cart td.product-subtotal {
  font-weight : 600 !important;
  color       : var(--als-accent-dark) !important;
}

/* Quantité */
.woocommerce table.cart td.product-quantity .qty {
  border       : 1px solid var(--als-border) !important;
  border-radius: 6px !important;
  padding      : 6px 10px !important;
  font-size    : 14px !important;
  font-family  : var(--als-font) !important;
  width        : 65px !important;
  text-align   : center !important;
  outline      : none !important;
  transition   : border-color .2s !important;
}
.woocommerce table.cart td.product-quantity .qty:focus {
  border-color: var(--als-accent) !important;
  box-shadow  : 0 0 0 3px rgba(0,171,178,.15) !important;
}

/* Bouton supprimer */
.woocommerce table.cart td.product-remove a.remove {
  color           : #b0b0b0 !important;
  font-size       : 18px !important;
  font-weight     : 400 !important;
  width           : 28px !important;
  height          : 28px !important;
  border-radius   : 50% !important;
  display         : flex !important;
  align-items     : center !important;
  justify-content : center !important;
  transition      : background .2s, color .2s !important;
  text-decoration : none !important;
}
.woocommerce table.cart td.product-remove a.remove:hover {
  background: #fde8e8 !important;
  color     : #e53e3e !important;
}

/* ══════════════════════════════════════════════════════════
   4. ACTIONS DU PANIER (Mettre à jour + Coupon)
   ══════════════════════════════════════════════════════════ */
.woocommerce .cart-collaterals,
.woocommerce .actions {
  padding    : 16px 0 !important;
  gap        : 12px !important;
  flex-wrap  : wrap !important;
}

/* Coupon */
.woocommerce .coupon input.input-text {
  border       : 1px solid var(--als-border) !important;
  border-radius: 6px !important;
  padding      : 10px 14px !important;
  font-family  : var(--als-font) !important;
  font-size    : 13px !important;
  outline      : none !important;
  transition   : border-color .2s !important;
}
.woocommerce .coupon input.input-text:focus {
  border-color: var(--als-accent) !important;
  box-shadow  : 0 0 0 3px rgba(0,171,178,.15) !important;
}

/* Bouton Appliquer le coupon + Mettre à jour */
.woocommerce .coupon button[name="apply_coupon"],
.woocommerce button[name="update_cart"] {
  background   : transparent !important;
  border       : 1.5px solid var(--als-accent) !important;
  color        : var(--als-accent) !important;
  border-radius: 6px !important;
  padding      : 10px 18px !important;
  font-family  : var(--als-font) !important;
  font-size    : 13px !important;
  font-weight  : 600 !important;
  cursor       : pointer !important;
  transition   : background .2s, color .2s !important;
}
.woocommerce .coupon button[name="apply_coupon"]:hover,
.woocommerce button[name="update_cart"]:hover {
  background: var(--als-accent) !important;
  color     : #fff !important;
}

/* ══════════════════════════════════════════════════════════
   5. TOTAUX DU PANIER (cart-collaterals)
   ══════════════════════════════════════════════════════════ */
.cart-collaterals {
  margin-top: 32px !important;
}
.cart_totals {
  background   : #fff !important;
  border       : 1px solid var(--als-border) !important;
  border-radius: var(--als-radius) !important;
  padding      : 24px 28px !important;
  max-width    : 480px !important;
  margin-left  : auto !important;
  font-family  : var(--als-font) !important;
}
.cart_totals h2 {
  font-size    : 16px !important;
  font-weight  : 700 !important;
  color        : var(--als-text) !important;
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--als-accent-light) !important;
  font-family  : var(--als-font) !important;
}

.cart_totals table {
  width           : 100% !important;
  border-collapse : collapse !important;
}
.cart_totals table th,
.cart_totals table td {
  padding  : 10px 0 !important;
  border-top: 1px solid var(--als-border) !important;
  font-size: 14px !important;
  font-family: var(--als-font) !important;
}
.cart_totals table tr:first-child th,
.cart_totals table tr:first-child td {
  border-top: none !important;
}
.cart_totals table th {
  color      : var(--als-muted) !important;
  font-weight: 500 !important;
  width      : 40% !important;
}
.cart_totals table td {
  color      : var(--als-text) !important;
  font-weight: 600 !important;
  text-align : right !important;
}
.cart_totals table .order-total th,
.cart_totals table .order-total td {
  font-size  : 16px !important;
  font-weight: 700 !important;
  color      : var(--als-accent-dark) !important;
  border-top : 2px solid var(--als-accent-light) !important;
  padding-top: 14px !important;
}

/* Options d'expédition */
.cart_totals .woocommerce-shipping-calculator { margin-top: 6px; }
.cart_totals .shipping-calculator-button {
  font-size  : 12px !important;
  color      : var(--als-accent) !important;
  font-family: var(--als-font) !important;
}

.cart_totals .woocommerce-shipping-methods label {
  font-size  : 13px !important;
  font-family: var(--als-font) !important;
  color      : var(--als-text) !important;
}
.cart_totals .woocommerce-shipping-methods input[type="radio"] {
  accent-color: var(--als-accent) !important;
}

/* ══════════════════════════════════════════════════════════
   6. BOUTON "VALIDER LA COMMANDE"
   ══════════════════════════════════════════════════════════ */
.wc-proceed-to-checkout,
.cart_totals .wc-proceed-to-checkout {
  margin-top: 20px !important;
}
.wc-proceed-to-checkout .checkout-button,
.woocommerce a.button.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.button {
  display      : block !important;
  width        : 100% !important;
  background   : var(--als-accent) !important;
  color        : #fff !important;
  border       : none !important;
  border-radius: 8px !important;
  padding      : 14px 24px !important;
  font-family  : var(--als-font) !important;
  font-size    : 15px !important;
  font-weight  : 700 !important;
  text-align   : center !important;
  text-decoration: none !important;
  cursor       : pointer !important;
  transition   : background .2s, transform .15s, box-shadow .2s !important;
  box-shadow   : 0 4px 14px rgba(0,171,178,.3) !important;
  letter-spacing: .02em !important;
}
.woocommerce a.button.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.button:hover {
  background : var(--als-accent-dark) !important;
  transform  : translateY(-1px) !important;
  box-shadow : 0 6px 18px rgba(0,171,178,.4) !important;
  color      : #fff !important;
}

/* ══════════════════════════════════════════════════════════
   7. BOUTONS DE PARTAGE — Fix taille sur page panier
   (les boutons sont parfois injectés par WC même hors fiche produit)
   ══════════════════════════════════════════════════════════ */
.als-share-wrap {
  display    : flex !important;
  align-items: center !important;
  gap        : 8px !important;
  flex-wrap  : wrap !important;
  margin     : 16px 0 !important;
}
.als-share-label {
  font-size  : 13px !important;
  color      : #888 !important;
  font-weight: 500 !important;
  font-family: var(--als-font) !important;
}
.als-share-btn {
  display        : flex !important;
  align-items    : center !important;
  justify-content: center !important;
  width          : 36px !important;
  height         : 36px !important;
  min-width      : 36px !important;
  min-height     : 36px !important;
  max-width      : 36px !important;
  max-height     : 36px !important;
  border-radius  : 50% !important;
  background     : #f0f0f0 !important;
  color          : #444 !important;
  transition     : background .2s, color .2s, transform .15s !important;
  text-decoration: none !important;
  overflow       : hidden !important;
  flex-shrink    : 0 !important;
}
.als-share-btn svg {
  width    : 18px !important;
  height   : 18px !important;
  max-width: 18px !important;
  display  : block !important;
  flex-shrink: 0 !important;
}
.als-share-btn:hover { transform: translateY(-2px) !important; color: #fff !important; }
.als-share-facebook:hover  { background: #1877f2 !important; }
.als-share-twitter:hover   { background: #000 !important; }
.als-share-pinterest:hover { background: #e60023 !important; }
.als-share-whatsapp:hover  { background: #25d366 !important; }
.als-share-email:hover     { background: var(--als-accent) !important; }

/* ══════════════════════════════════════════════════════════
   8. MESSAGES WooCommerce (notices)
   ══════════════════════════════════════════════════════════ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: 8px !important;
  font-family  : var(--als-font) !important;
  font-size    : 14px !important;
}
.woocommerce-message {
  border-top-color: var(--als-accent) !important;
  background      : var(--als-accent-light) !important;
}

/* ══════════════════════════════════════════════════════════
   9. BREADCRUMB / FIL D'ARIANE
   ══════════════════════════════════════════════════════════ */
.woocommerce .woocommerce-breadcrumb {
  font-family: var(--als-font) !important;
  font-size  : 12px !important;
  color      : var(--als-muted) !important;
  margin-bottom: 20px !important;
}
.woocommerce .woocommerce-breadcrumb a {
  color          : var(--als-accent) !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════
   10. RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.woocommerce-cart #left-area,
  body.woocommerce-cart #main-content .container,
  body.woocommerce-checkout #left-area,
  body.woocommerce-checkout #main-content .container {
    padding: 0 16px !important;
  }

  .woocommerce table.cart td,
  .woocommerce table.shop_table td {
    padding: 12px 10px !important;
  }

  .cart_totals {
    max-width: 100% !important;
    margin-left: 0 !important;
    padding: 18px 16px !important;
  }

  .woocommerce table.cart thead { display: none !important; }
  .woocommerce table.cart tbody tr {
    display: block !important;
    border-bottom: 1px solid var(--als-border) !important;
    padding: 12px 0 !important;
  }
  .woocommerce table.cart tbody td {
    display      : block !important;
    border-top   : none !important;
    padding      : 6px 16px !important;
    text-align   : left !important;
  }
  .woocommerce table.cart td.product-thumbnail {
    display: none !important;
  }
}