/* ========= JOPIC GLOBAL BUTTON STYLE (plugins only) =========
   ✅ TU MODIFIES CE FICHIER SEULEMENT.
   1) Ajoute/retire des sélecteurs dans la liste ci-dessous
   2) Ajuste les couleurs/variables si besoin
*/

/* Variables globales */
:root{
  --jopic-orange:#e86c00;
  --jopic-hover-text:#434549;
  --jopic-font-size:21px;
  --jopic-breath:4.2s;
}

/* ====== LISTE DES SELECTEURS (ÉDITE ICI) ======
   Ajoute un sélecteur par ligne, séparé par des virgules.
*/
.fitment-jopic .fj-btn,
.fitment-jopic .jpf-simple-quick-view__fitment .jpf-product-card__button,
.woocommerce-account .jopic-myaccount-btn,
.jopic-myaccount-btn,
#jopic-chat-ai-form button.jopic-btn,
.jopic-chat-ai-bubble,
button.fusion-button.form-form-submit,
button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button,
button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon,
.jdr-btn:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove),
.jdr-btn.primary:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove),
.jdr-btn.ghost:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove){
  display:inline-flex;
  width:auto !important;
  max-width:max-content;

  align-items:center;
  justify-content:center;
  gap:8px;

  padding:12px 20px;
  border-radius:14px;

  background: linear-gradient(115deg,#8a3600 0%,#b84a00 35%, var(--jopic-orange) 70%,#ff9d4a 100%);

  color:#ffffff !important;
  text-decoration:none !important;
  font-weight:700;
  letter-spacing:.25px;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:var(--jopic-font-size);
  line-height:1;

  border:none !important;
  cursor:pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -3px 10px rgba(0,0,0,0.55),
    0 18px 45px rgba(0,0,0,0.75);

  transition: all .28s cubic-bezier(.22,.61,.36,1);
  animation: jopicBreath var(--jopic-breath) ease-in-out infinite;

  position:relative;
  overflow:hidden;
  transform-origin:center;
  isolation:isolate;
  -webkit-tap-highlight-color: transparent;
}

/* Hover */
.fitment-jopic .fj-btn:hover,
.fitment-jopic .jpf-simple-quick-view__fitment .jpf-product-card__button:hover,
.woocommerce-account .jopic-myaccount-btn:hover,
.jopic-myaccount-btn:hover,
#jopic-chat-ai-form button.jopic-btn:hover,
.jopic-chat-ai-bubble:hover,
button.fusion-button.form-form-submit:hover,
button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button:hover,
button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon:hover,
.jdr-btn:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove):hover,
.jdr-btn.primary:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove):hover,
.jdr-btn.ghost:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove):hover{
  background: linear-gradient(115deg,#ffffff 0%,#ffd7b0 30%,#ff9947 65%, var(--jopic-orange) 100%);
  color:var(--jopic-hover-text) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 26px rgba(232,108,0,0.35),
    0 24px 60px rgba(0,0,0,0.7);

  transform:translateY(-3px) scale(1.03);
}

/* Click */
.fitment-jopic .fj-btn:active,
.fitment-jopic .jpf-simple-quick-view__fitment .jpf-product-card__button:active,
.woocommerce-account .jopic-myaccount-btn:active,
.jopic-myaccount-btn:active,
#jopic-chat-ai-form button.jopic-btn:active,
.jopic-chat-ai-bubble:active,
button.fusion-button.form-form-submit:active,
button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button:active,
button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon:active,
.jdr-btn:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove):active,
.jdr-btn.primary:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove):active,
.jdr-btn.ghost:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove):active{
  animation:none;
  transform: translateY(0px) scale(.92);
  filter: brightness(.98);
}

/* flash */
.fitment-jopic .fj-btn::after,
.fitment-jopic .jpf-simple-quick-view__fitment .jpf-product-card__button::after,
.woocommerce-account .jopic-myaccount-btn::after,
.jopic-myaccount-btn::after,
#jopic-chat-ai-form button.jopic-btn::after,
.jopic-chat-ai-bubble::after,
button.fusion-button.form-form-submit::after,
button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button::after,
button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon::after,
.jdr-btn:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove)::after,
.jdr-btn.primary:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove)::after,
.jdr-btn.ghost:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove)::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  transform: scale(0);
  opacity:0;
  pointer-events:none;
}

.fitment-jopic .fj-btn:active::after,
.fitment-jopic .jpf-simple-quick-view__fitment .jpf-product-card__button:active::after,
.woocommerce-account .jopic-myaccount-btn:active::after,
.jopic-myaccount-btn:active::after,
#jopic-chat-ai-form button.jopic-btn:active::after,
.jopic-chat-ai-bubble:active::after,
button.fusion-button.form-form-submit:active::after,
button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button:active::after,
button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon:active::after,
.jdr-btn:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove):active::after,
.jdr-btn.primary:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove):active::after,
.jdr-btn.ghost:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove):active::after{
  animation: jopicClickFlash .42s cubic-bezier(.22,.61,.36,1) both;
}

/* ripple */
.fitment-jopic .fj-btn::before,
.fitment-jopic .jpf-simple-quick-view__fitment .jpf-product-card__button::before,
.woocommerce-account .jopic-myaccount-btn::before,
.jopic-myaccount-btn::before,
#jopic-chat-ai-form button.jopic-btn::before,
.jopic-chat-ai-bubble::before,
button.fusion-button.form-form-submit::before,
button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button::before,
button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon::before,
.jdr-btn:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove)::before,
.jdr-btn.primary:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove)::before,
.jdr-btn.ghost:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove)::before{
  content:"";
  position:absolute;
  width:18px;height:18px;
  left:50%;top:50%;
  transform: translate(-50%,-50%) scale(0);
  border-radius:999px;
  background: rgba(255,255,255,.25);
  opacity:0;
  pointer-events:none;
}

.fitment-jopic .fj-btn:active::before,
.fitment-jopic .jpf-simple-quick-view__fitment .jpf-product-card__button:active::before,
.woocommerce-account .jopic-myaccount-btn:active::before,
.jopic-myaccount-btn:active::before,
#jopic-chat-ai-form button.jopic-btn:active::before,
.jopic-chat-ai-bubble:active::before,
button.fusion-button.form-form-submit:active::before,
button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button:active::before,
button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon:active::before,
.jdr-btn:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove):active::before,
.jdr-btn.primary:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove):active::before,
.jdr-btn.ghost:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove):active::before{
  animation: jopicRipple .55s ease-out both;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .fitment-jopic .fj-btn,
  .fitment-jopic .jpf-simple-quick-view__fitment .jpf-product-card__button,
  .woocommerce-account .jopic-myaccount-btn,
  .jopic-myaccount-btn,
  #jopic-chat-ai-form button.jopic-btn,
  .jopic-chat-ai-bubble,
  button.fusion-button.form-form-submit,
  button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button,
  button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon,
  .jdr-btn:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove),
  .jdr-btn.primary:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove),
  .jdr-btn.ghost:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove){
    animation:none;
  }
  .fitment-jopic .fj-btn::before,
  .fitment-jopic .fj-btn::after,
  .fitment-jopic .jpf-simple-quick-view__fitment .jpf-product-card__button::before,
  .fitment-jopic .jpf-simple-quick-view__fitment .jpf-product-card__button::after,
  .woocommerce-account .jopic-myaccount-btn::before,
  .woocommerce-account .jopic-myaccount-btn::after,
  .jopic-myaccount-btn::before,
  .jopic-myaccount-btn::after,
  #jopic-chat-ai-form button.jopic-btn::before,
  #jopic-chat-ai-form button.jopic-btn::after,
  .jopic-chat-ai-bubble::before,
  .jopic-chat-ai-bubble::after,
  button.fusion-button.form-form-submit::before,
  button.fusion-button.form-form-submit::after,
  button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button::before,
  button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button::after,
  button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon::before,
  button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon::after,
  .jdr-btn:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove)::before,
  .jdr-btn:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove)::after{
    animation:none !important;
  }
}

/* Keyframes */
@keyframes jopicBreath{
  0%{transform:translateY(0px) scale(1);}
  50%{transform:translateY(-3px) scale(1.02);}
  100%{transform:translateY(0px) scale(1);}
}
@keyframes jopicRipple{
  0%{transform:translate(-50%,-50%) scale(0);opacity:0;}
  15%{opacity:.9;}
  100%{transform:translate(-50%,-50%) scale(18);opacity:0;}
}
@keyframes jopicClickFlash{
  0%{transform:scale(0.25);opacity:0;}
  30%{transform:scale(1);opacity:.9;}
  100%{transform:scale(1.25);opacity:0;}
}

/* ===== Classe manuelle bouton Jopic / Avada =====
   Ajoute la classe jopic-bouton sur les boutons Avada que tu controles.
*/
button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button,
button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon,
.jopic-bouton:not(.jopic-l25-btn){
  display:inline-flex !important;
  width:auto !important;
  max-width:max-content !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:12px 20px !important;
  border-radius:14px !important;
  background: linear-gradient(115deg,#8a3600 0%,#b84a00 35%, var(--jopic-orange) 70%,#ff9d4a 100%) !important;
  color:#ffffff !important;
  text-decoration:none !important;
  font-weight:700 !important;
  letter-spacing:.25px !important;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size:var(--jopic-font-size) !important;
  line-height:1 !important;
  border:none !important;
  cursor:pointer !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -3px 10px rgba(0,0,0,0.55),
    0 18px 45px rgba(0,0,0,0.75) !important;
  transition: all .28s cubic-bezier(.22,.61,.36,1) !important;
  animation: jopicBreath var(--jopic-breath) ease-in-out infinite !important;
  position:relative !important;
  overflow:hidden !important;
  transform-origin:center !important;
  isolation:isolate !important;
}

button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button:hover,
button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon:hover,
.jopic-bouton:not(.jopic-l25-btn):hover{
  background: linear-gradient(115deg,#ffffff 0%,#ffd7b0 30%,#ff9947 65%, var(--jopic-orange) 100%) !important;
  color:var(--jopic-hover-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 26px rgba(232,108,0,0.35),
    0 24px 60px rgba(0,0,0,0.7) !important;
  transform:translateY(-3px) scale(1.03) !important;
}

button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button:active,
button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon:active,
.jopic-bouton:not(.jopic-l25-btn):active{
  animation:none !important;
  transform: translateY(0px) scale(.92) !important;
  filter: brightness(.98) !important;
}

button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button .fusion-button-text,
button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button .awb-button__text,
button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon .fusion-button-text,
button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon .awb-button__text,
.jopic-bouton:not(.jopic-l25-btn) .fusion-button-text,
.jopic-bouton:not(.jopic-l25-btn) .awb-button__text{
  color:inherit !important;
  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  letter-spacing:inherit !important;
  line-height:inherit !important;
  text-decoration:inherit !important;
}

button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button .awb-button__icon,
button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon .awb-button__icon,
.jopic-bouton:not(.jopic-l25-btn) .awb-button__icon{
  color:inherit !important;
  line-height:inherit !important;
}

/* Renforce le relief des vrais boutons Avada/Fusion qui utilisent encore
   leurs variables internes pour le fond et l'ombrage. */
.jopic-bouton:not(.jopic-l25-btn){
  --button_accent_color:#ffffff !important;
  --button_accent_hover_color:var(--jopic-hover-text) !important;
  --button_border_color:transparent !important;
  --button_border_hover_color:transparent !important;
  --button_gradient_top_color:#8a3600 !important;
  --button_gradient_bottom_color:#ff9d4a !important;
  --button_gradient_top_color_hover:#ffffff !important;
  --button_gradient_bottom_color_hover:var(--jopic-orange) !important;
  --button_box_shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 0 0 1px rgba(255,186,120,0.22),
    inset 0 -4px 12px rgba(0,0,0,0.46),
    0 18px 45px rgba(0,0,0,0.75) !important;
  background-color:transparent !important;
  background-image: linear-gradient(115deg,#8a3600 0%,#b84a00 35%, var(--jopic-orange) 70%,#ff9d4a 100%) !important;
  -webkit-box-shadow: var(--button_box_shadow) !important;
  box-shadow: var(--button_box_shadow) !important;
  text-shadow:none !important;
  filter:none !important;
}

.jopic-bouton:not(.jopic-l25-btn):hover{
  --button_box_shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.32),
    inset 0 -4px 12px rgba(0,0,0,0.42),
    0 0 26px rgba(232,108,0,0.35),
    0 24px 60px rgba(0,0,0,0.7) !important;
  background-image: linear-gradient(115deg,#ffffff 0%,#ffd7b0 30%,#ff9947 65%, var(--jopic-orange) 100%) !important;
  -webkit-box-shadow: var(--button_box_shadow) !important;
  box-shadow: var(--button_box_shadow) !important;
}

/* ===== Relief direct pour bouton Avada manuel =====
   Meme relief que le bouton chat, mais cible directement le vrai element.
*/
.fusion-button.jopic-bouton:not(.jopic-l25-btn){
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -3px 10px rgba(0,0,0,0.55),
    0 18px 45px rgba(0,0,0,0.75) !important;
  -webkit-box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -3px 10px rgba(0,0,0,0.55),
    0 18px 45px rgba(0,0,0,0.75) !important;
}

.fusion-button.jopic-bouton:not(.jopic-l25-btn){
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -3px 10px rgba(0,0,0,0.55),
    0 18px 45px rgba(0,0,0,0.75) !important;
  -webkit-box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -3px 10px rgba(0,0,0,0.55),
    0 18px 45px rgba(0,0,0,0.75) !important;
}

.fusion-button.jopic-bouton:not(.jopic-l25-btn):hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 26px rgba(232,108,0,0.35),
    0 24px 60px rgba(0,0,0,0.7) !important;
  -webkit-box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 26px rgba(232,108,0,0.35),
    0 24px 60px rgba(0,0,0,0.7) !important;
}

/* ===== Patch Jopic Chat AI cible =====
   Le plugin chat utilise #jopic-chat-ai-launch .jopic-chat-ai-bubble,
   donc on force ici la meme couche design avec une priorite plus forte.
*/
#jopic-chat-ai-launch .jopic-chat-ai-bubble{
  display:inline-flex !important;
  width:auto !important;
  max-width:max-content !important;
  min-width:unset !important;
  height:auto !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  white-space:nowrap !important;
  padding:12px 20px !important;
  border-radius:14px !important;
  background: linear-gradient(115deg,#8a3600 0%,#b84a00 35%, var(--jopic-orange) 70%,#ff9d4a 100%) !important;
  color:#ffffff !important;
  text-decoration:none !important;
  font-weight:700 !important;
  letter-spacing:.25px !important;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size:var(--jopic-font-size) !important;
  line-height:1 !important;
  border:none !important;
  cursor:pointer !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -3px 10px rgba(0,0,0,0.55),
    0 18px 45px rgba(0,0,0,0.75) !important;
  transition: all .28s cubic-bezier(.22,.61,.36,1) !important;
  animation: jopicBreath var(--jopic-breath) ease-in-out infinite !important;
  position:relative !important;
  overflow:hidden !important;
  transform-origin:center !important;
  isolation:isolate !important;
  -webkit-tap-highlight-color: transparent;
}

#jopic-chat-ai-launch .jopic-chat-ai-bubble:hover{
  background: linear-gradient(115deg,#ffffff 0%,#ffd7b0 30%,#ff9947 65%, var(--jopic-orange) 100%) !important;
  color:var(--jopic-hover-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 26px rgba(232,108,0,0.35),
    0 24px 60px rgba(0,0,0,0.7) !important;
  transform:translateY(-3px) scale(1.03) !important;
  filter:none !important;
}

#jopic-chat-ai-launch .jopic-chat-ai-bubble:active{
  animation:none !important;
  transform: translateY(0px) scale(.92) !important;
  filter: brightness(.98) !important;
}

#jopic-chat-ai-launch .jopic-chat-ai-bubble::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  transform: scale(0);
  opacity:0;
  pointer-events:none;
}

#jopic-chat-ai-launch .jopic-chat-ai-bubble:active::after{
  animation: jopicClickFlash .42s cubic-bezier(.22,.61,.36,1) both;
}

#jopic-chat-ai-launch .jopic-chat-ai-bubble::before{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%) scale(0);
  border-radius:999px;
  background: rgba(255,255,255,.25);
  opacity:0;
  pointer-events:none;
}

#jopic-chat-ai-launch .jopic-chat-ai-bubble:active::before{
  animation: jopicRipple .55s ease-out both;
}

/* ===== Patch WooCommerce Mon compte (optionnel) =====
   Si tu as 2-3 boutons qui ne matchent pas, ajoute leurs sélecteurs ici.
*/
.woocommerce-account:not(.woocommerce-orders):not(.woocommerce-payment-methods) .woocommerce-MyAccount-content a.button{
  display:inline-flex !important;
  width:auto !important;
  max-width:max-content !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:12px 20px !important;
  border-radius:14px !important;
  background: linear-gradient(115deg,#8a3600 0%,#b84a00 35%, var(--jopic-orange) 70%,#ff9d4a 100%) !important;
  color:#ffffff !important;
  text-decoration:none !important;
  font-weight:700 !important;
  letter-spacing:.25px !important;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size:var(--jopic-font-size) !important;
  line-height:1 !important;
  border:none !important;
  cursor:pointer !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05),
              inset 0 -3px 10px rgba(0,0,0,0.55),
              0 18px 45px rgba(0,0,0,0.75) !important;
  transition: all .28s cubic-bezier(.22,.61,.36,1) !important;
  animation: jopicBreath var(--jopic-breath) ease-in-out infinite !important;
  position:relative !important;
  overflow:hidden !important;
  transform-origin:center !important;
  isolation:isolate !important;
  -webkit-tap-highlight-color: transparent;
}

/* Réduire police bouton sur cellulaire*/
@media (max-width: 520px){
  :root{ --jopic-font-size: 17px; }
  .fitment-jopic .fj-btn,
  .fitment-jopic .jpf-simple-quick-view__fitment .jpf-product-card__button,
  .woocommerce-account .jopic-myaccount-btn,
  .jopic-myaccount-btn,
  #jopic-chat-ai-form button.jopic-btn,
  .jopic-chat-ai-bubble,
  button[name="calc_shipping"].fusion-button.button-default.fusion-button-default-size.button,
  button[name="apply_coupon"].fusion-button.button-default.fusion-button-default-size.button.fusion-apply-coupon,
  .jopic-bouton:not(.jopic-l25-btn),
  button.fusion-button.form-form-submit,
  .jdr-btn:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove),
  .jdr-btn.primary:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove),
  .jdr-btn.ghost:not([data-add-part]):not([data-remove-part]):not(.jdr-part-remove){
    padding: 11px 16px;
  }

  #jopic-chat-ai-launch .jopic-chat-ai-bubble{
    padding: 11px 16px !important;
  }
}

.fitment-jopic .jpf-simple-quick-view__fitment .jpf-product-card__button{
  width:100% !important;
  max-width:none !important;
  min-height:0;
  padding:12px 18px;
  font-size:18px;
}

.jopic-pre-nav-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.10);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .12s ease, visibility .12s ease;
  z-index:2147483647;
}

.jopic-pre-nav-overlay.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.jopic-pre-nav-overlay__panel{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:10px 16px;
  border-radius:999px;
  color:#fff;
  font:800 14px/1.1 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing:.2px;
  background:rgba(17,17,17,.78);
  border:1px solid rgba(255,126,0,.40);
  box-shadow:0 14px 38px rgba(0,0,0,.28);
}

.jopic-pre-nav-overlay__spinner{
  width:17px;
  height:17px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.28);
  border-top-color:var(--jopic-orange);
  animation:jopicPreNavSpin .62s linear infinite;
}

@keyframes jopicPreNavSpin{
  to{ transform:rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  #jopic-chat-ai-launch .jopic-chat-ai-bubble{
    animation:none !important;
  }

  #jopic-chat-ai-launch .jopic-chat-ai-bubble::before,
  #jopic-chat-ai-launch .jopic-chat-ai-bubble::after,
  .jopic-pre-nav-overlay__spinner{
    animation:none !important;
  }
}