/* ═══════════════════════════════════════════════════════════

   SASU ABCduWeb — Page Panier (cart.css)

   Harmonisation avec la charte graphique du site

   ═══════════════════════════════════════════════════════════ */



:root {

  --als-accent       : #8ab734;

  --als-accent-dark  : #004C50;

  --als-accent-light : #e8f6f7;

  --als-text         : #2b2b2b;

  --als-muted        : #6b7a7b;

  --als-border       : #e8eeef;

  --als-radius       : 10px;

  --als-font         : 'CaviarDreams', 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 30px !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 30px !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;

  }

}