/*
Theme Name: Divi Child TS Art Box
Template: Divi
Description: Divi Child Theme
Author: Sepixel
Author URI: https://sepixel.fr/
*/

/* ======================================
   Desktop ≥ 1101px — Header seulement
   ====================================== */
@media screen and (min-width: 1101px) {
  /* 1) Supprime le scroll horizontal du menu desktop */
  .et_pb_module.et_pb_menu:not(.no-burger-footer) .et_pb_menu__menu {
    overflow-x: hidden !important;
  }

  /* 2) Remets le wrapping autorisé pour que le menu reste sur une seule ligne sans scroll */
  .et_pb_module.et_pb_menu:not(.no-burger-footer) .et_pb_menu__menu {
    flex-wrap: nowrap !important;
  }

  /* 3) Retire le padding à droite qui pousse le menu à dépasser */
  .et_pb_module.et_pb_menu:not(.no-burger-footer) .et_pb_menu__wrap {
    padding-right: 0 !important;
  }

  /* 4) Ajuste l’espacement autour des icônes panier & loupe */
  .et_pb_module.et_pb_menu:not(.no-burger-footer) .et_pb_menu__wrap .et_pb_menu_cart-button,
  .et_pb_module.et_pb_menu:not(.no-burger-footer) .et_pb_menu__wrap .et_pb_menu_search-button {
    margin: 0 8px !important;
  }

  /* Regroupe les icônes à droite (push menu links left) */
  .et_pb_module.et_pb_menu:not(.no-burger-footer) .et_pb_menu__menu {
    margin-right: auto !important;
  }
}

/* ======================================
   Footer horizontal (pas de burger)
   ====================================== */
.no-burger-footer .et_mobile_nav_menu,
.no-burger-footer .mobile_menu_bar {
  display: none !important;
}

.no-burger-footer .et_pb_menu__menu {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 10px 0;
  text-align: center;
}

.no-burger-footer .et_pb_menu__menu li {
  list-style: none;
  position: relative;
  padding: 0 10px;
}

.no-burger-footer .et_pb_menu__menu li:not(:last-child)::after {
  content: "|";
  position: absolute;
  right: -6px;
  top: 0;
  color: #ccc;
  font-weight: normal;
}

.no-burger-footer .et_pb_menu__menu li a {
  font-size: 16px;
  white-space: nowrap;
}

/* ======================================
   Desktop & Footer — Styles communs
   ====================================== */
.et_pb_module.et_pb_menu .et_pb_row--with-menu,
.et_pb_module.et_pb_menu .et_pb_menu__wrap,
.et_pb_module.et_pb_menu .et_pb_menu__menu {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  max-width: 100% !important;
  height: auto !important;
  text-align: left !important;
}

/* ======================================
   Mobile ≤ 1100px — Header seulement
   ====================================== */
@media screen and (max-width: 1100px) {
  /* cache le desktop menu, sauf footer */
  .et_pb_module.et_pb_menu:not(.no-burger-footer) .et_pb_menu__menu {
    display: none !important;
  }

  /* affiche le burger */
  .et_pb_module.et_pb_menu:not(.no-burger-footer) .et_mobile_nav_menu {
    display: block !important;
    order: 2 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 9999 !important;
  }

  /* style panneau mobile */
  .et_pb_module.et_pb_menu:not(.no-burger-footer) .et_mobile_menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90vw !important;
    max-width: 400px !important;
    background: white !important;
    padding: 20px 0 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
    border-radius: 10px !important;
  }

  /* liens centrés */
  .et_pb_module.et_pb_menu:not(.no-burger-footer) .et_mobile_menu li {
    text-align: center;
  }

  .et_pb_module.et_pb_menu:not(.no-burger-footer) .et_mobile_menu li a {
    display: block;
    padding: 14px 20px;
    font-size: 18px;
    color: #222;
    border-bottom: 1px solid #eee;
    text-transform: uppercase;
  }

  .et_pb_module.et_pb_menu:not(.no-burger-footer) .et_mobile_menu li:last-child a {
    border-bottom: none;
  }
}

@media screen and (max-width: 768px) {
  .et_pb_module.et_pb_menu .et_pb_menu__wrap {
    justify-content: flex-end !important;
    padding-right: 15px !important;
  }

  .et_pb_module.et_pb_menu .et_pb_menu__wrap .et_pb_menu_search-button,
  .et_pb_module.et_pb_menu .et_pb_menu__wrap .et_pb_menu_cart-button {
    font-size: 16px !important;
    width: 22px !important;
    height: 22px !important;
    margin-right: 5px !important;
  }
}

/* ======================================
   Sticky Header
   ====================================== */
.et_pb_section.et_pb_sticky,
.et_pb_menu--sticky {
  z-index: 9999 !important;
}

/* ======================================
   Profil Icon (Font Awesome)
   ====================================== */
.profile-icon a {
  font-size: 0;
  display: flex;
  align-items: center;
}

.profile-icon a::before {
  content: "\f2bd";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 20px;
  color: white;
  margin-left: 10px;
}

.profile-icon a:hover::before {
  color: #FFD700;
}

/* ======================================
   Reset outline
   ====================================== */
* {
  outline: none !important;
}

/* ======================================
   Etat produit
   ====================================== */
.etat-produit.disponible {
    color: green;
    font-weight: bold;
}

.etat-produit.en-dev {
    color: red;
    font-weight: bold;
}

/* ======================================
   Probleme double fleche variation produit
   ====================================== */
.variations select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none !important;
    padding-right: 2rem; /* espace pour que le texte ne chevauche pas une éventuelle icône */
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
}

/* Masquer toutes les lignes de totaux financières inutiles dans WooCommerce */

.woocommerce-cart .cart_totals tr.cart-subtotal,
.woocommerce-cart .cart_totals tr.shipping,
.woocommerce-cart .cart_totals tr.tax-total,
.woocommerce-cart .cart_totals tr.order-discount,
.woocommerce-cart .cart_totals tr.order-total,

.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal,
.woocommerce-checkout-review-order-table tfoot tr.shipping,
.woocommerce-checkout-review-order-table tfoot tr.tax,
.woocommerce-checkout-review-order-table tfoot tr.order-discount,
.woocommerce-checkout-review-order-table tfoot tr.order-total,

.woocommerce-order-overview .woocommerce-table__footer tr.woocommerce-shipping-totals,
.woocommerce-order-overview .woocommerce-table__footer tr.tax-total,
.woocommerce-order-overview .woocommerce-table__footer tr.order-total,
.woocommerce-order-overview .woocommerce-table__footer tr.cart-subtotal,
.woocommerce-order-overview .woocommerce-table__footer tr.order-discount,

.woocommerce-email-order-details tfoot tr.cart-subtotal,
.woocommerce-email-order-details tfoot tr.shipping,
.woocommerce-email-order-details tfoot tr.tax,
.woocommerce-email-order-details tfoot tr.order-discount,
.woocommerce-email-order-details tfoot tr.order-total {
    display: none !important;
}

/* Supprimer la colonne "Sous-total" (entête + données) */
.woocommerce table.shop_table th.product-total,
.woocommerce table.shop_table td.product-total {
    display: none !important;
}

/* Supprimer la ligne TVA */
.woocommerce table.shop_table tfoot tr.tax-total,
.woocommerce table.shop_table tfoot tr.tax {
    display: none !important;
}

/**/



/**/

/*
 * Billing e-mail en lecture seule
 */

/* 1) On masque complètement le champ e-mail natif (label + input) 
#billing_email_field {
  display: none !important;
}
*/
/* 2) On force ton wrapper personnalisé à prendre toute la largeur */
.woocommerce form .woocommerce-billing-fields .tsartbox-readonly-email {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1.5em;
}

/* 3) On s’assure que le <p> et la petite note sont aussi en full width */
.tsartbox-readonly-email .tsartbox-email-value,
.tsartbox-readonly-email .tsartbox-email-note {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* 4) Petite mise en forme supplémentaire */
.tsartbox-readonly-email label {
  font-weight: 600;
  margin-bottom: 0.3em;
  display: block;
}
.tsartbox-email-value {
  background: #f7f7f7;
  padding: 0.6em 1em;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-weight: bold;
}
.tsartbox-email-note {
  margin-top: 0.4em;
  font-size: 0.85em;
  color: #666;
}