html body#product.hastone-zero-price .product-prices,
html body#product.hastone-zero-price .ce-product-prices--layout-stacked,
html body#product.hastone-zero-price .product-availability,
html body#product.hastone-zero-price .elementor-widget-product-badges:has(.ce-product-badges .ce-product-badge-out),
html body#product.hastone-zero-price .elementor-widget.elementor-widget-product-quantity,
html body#product.hastone-zero-price #add-to-cart-or-refresh,
html body#product.hastone-zero-price .elementor-element.elementor-widget-product-add-to-cart {
  display: none !important;
}

:root {
  --module-blue: #00B0E6;
  --module-dark-blue: #00235B;
  --module-light-blue: #B7DCEE;
  --module-light-blue-alpha: rgba(183, 220, 238, .22);
  --module-light-blue-alpha-50: rgba(183, 220, 238, .5);
  --module-gray-light: #f1f5f9;
}

#explodedviews {
  padding: 0 1em;
  background-image: linear-gradient(180deg, var(--module-light-blue-alpha) 0%, #FFFFFF 100%);
}
#explodedviews .elementor-element {
  margin: 0 !important;
}
.explodedviews_block {
  flex-direction: column;
  padding: 8rem 0;
}
.explodedviews_block h2 {
  text-align: center;
  margin-bottom: 3rem;
}
.explodedviews-tabs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.explodedviews-reduction-info {
  margin: 0;
  margin-left: auto;
  font-weight: bold;
  color: var(--module-dark-blue);
  white-space: nowrap;
}
.explodedviews_block .nav-pills a.nav-link {
  position: relative;
  padding: 1rem 2rem;
}
.explodedviews_block .nav-pills a.nav-link:after {
  position: absolute;
  z-index: 2;
  display: block;
  left: 0;
  bottom: 0;
  height: 3px;
  content: '';
  width: 100%;
  background-color: var(--module-blue);
  transition: .3s;
  transition-timing-function: 
  cubic-bezier(.58, .3, .005, 1);
  opacity: 0;
}

.explodedviews_block .nav-pills a.nav-link.active,
.explodedviews_block .nav-pills a.nav-link:hover,
.explodedviews_block .nav-pills a.nav-link.active,
.explodedviews_block .nav-pills a.nav-link.active:hover {
  background-color: transparent !important;
  color: var(--module-blue);
}
.explodedviews_block .nav-pills a.nav-link.active:after, .nav-pills a.nav-link:hover:after {
  opacity: 1;
}

.explodedviews_block .elementor-row{
  margin-top:2rem;
  gap: 1rem;
}
.explodedviews_block .exploded_view_img{
  max-width: 100% !important;
  height:fit-content;
}

/* Inner zoom au survol : l'image se grossit dans son propre cadre et la zone zoomée suit le curseur.
   Le cadre (le lien autour de l'image) masque le débordement ; le déplacement est géré en JS (explodedview.js). */
.explodedviews_block .exploded-view-image .exploded-view-zoom {
  display: block;
  overflow: hidden;
  cursor: zoom-in;
}
.explodedviews_block .exploded-view-image .exploded_view_img {
  transition: transform .2s ease-out;
  transform-origin: center center;
  will-change: transform;
}

.explodedviews_block table.explodedviews_ref_table {
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: none;
}
.explodedviews_block table.explodedviews_ref_table thead{
  background-color: var(--module-blue);
  color: white;
  text-transform: uppercase;
}
.explodedviews_block table.explodedviews_ref_table th,
.explodedviews_block table.explodedviews_ref_table td {
  text-align: left;
  padding: 1rem 2rem;
}
.explodedviews_block table.explodedviews_ref_table tr:nth-child(even) {
  background-color: var(--module-light-blue-alpha);
}
.explodedviews_block table.explodedviews_ref_table a { font-weight: bold; }
.explodedviews_block table.explodedviews_ref_table a:hover { color: var(--module-dark-blue); }
.explodedviews_block table.explodedviews_ref_table .add-to-cart-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.explodedviews_block table.explodedviews_ref_table .add-to-cart-link svg { fill: var(--module-dark-blue); }
.explodedviews_block table.explodedviews_ref_table .add-to-cart-link:hover svg { fill: var(--module-blue); }
.explodedviews_block table.explodedviews_ref_table .add-to-cart-link.disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.explodedviews_block table.explodedviews_ref_table .add-to-cart-link.disabled:hover svg { fill: var(--module-dark-blue); }
.explodedviews_block table.explodedviews_ref_table .exploded-view-cart-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
}
.explodedviews_block table.explodedviews_ref_table .exploded-view-qty {
  width: 42px;
  box-sizing: border-box;
  padding: 3px 2px;
  border: 1px solid var(--module-dark-blue);
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  color: var(--module-dark-blue);
  background: #fff;
  -moz-appearance: textfield;
  appearance: textfield;
}
.explodedviews_block table.explodedviews_ref_table .exploded-view-qty::-webkit-outer-spin-button,
.explodedviews_block table.explodedviews_ref_table .exploded-view-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Colonne "Garantie" : icône check */
.explodedviews_block table.explodedviews_ref_table .garantie-cell { text-align: center; }
.explodedviews_block table.explodedviews_ref_table .garantie-check { color: #2e9e5b; vertical-align: middle; }

@media (min-width: 1200px) {
  .explodedviews_block .elementor-column{
    /* padding:10px; */
  }
}

.break-line{
  white-space: normal;
  overflow-wrap: normal; /* ne casse pas les mots : évite que la colonne nom se réduise à rien */
  word-break: normal;
}

/* Nom de pièce : ligne aérée, sans troncature (le texte n'est jamais coupé) */
.explodedviews_block table.explodedviews_ref_table .piece-name {
  line-height: 1.3;
}

/* Répartition des colonnes (desktop/tablette ≥ 769px ; en dessous => cartes).
   `table-layout: fixed` + largeurs en px : chaque petite colonne garde une
   largeur stable calée sur son en-tête (jamais de débordement ni d'effondrement
   quelle que soit la largeur de la fenêtre), et le NOM absorbe tout l'espace
   restant. Les largeurs sont en px car le site utilise html{font-size:10px}
   (1rem = 10px), ce qui rend les % et rem peu fiables ici. */
@media (min-width: 769px) {
  .explodedviews_block table.explodedviews_ref_table { table-layout: fixed; width: 100%; }
  /* En-têtes : police réduite + coupure des mots trop longs pour éviter tout chevauchement (langues verbeuses type EN) */
  .explodedviews_block table.explodedviews_ref_table thead th { font-size: 11px; line-height: 1.2; overflow-wrap: break-word; word-break: normal; hyphens: none; }
  .explodedviews_block table.explodedviews_ref_table th,
  .explodedviews_block table.explodedviews_ref_table td { padding: 12px 5px; }
  /* Police des lignes réduite d'un cran (16px -> 15px) pour limiter les retours à la ligne */
  .explodedviews_block table.explodedviews_ref_table tbody td { font-size: 15px; }
  /* N° repère (largeur calée sur l'en-tête EN « REFERENCE » ~80px, pas sur la donnée qui est courte) */
  .explodedviews_block table.explodedviews_ref_table th:nth-child(1),
  .explodedviews_block table.explodedviews_ref_table td:nth-child(1) { width: 82px; text-align: center; }
  /* Nom pièce : pas de largeur fixe => prend tout l'espace restant */
  /* Référence pièce : toujours sur une seule ligne (nowrap) ; largeur élargie pour accueillir les refs les plus longues */
  .explodedviews_block table.explodedviews_ref_table th:nth-child(3),
  .explodedviews_block table.explodedviews_ref_table td:nth-child(3) { width: 160px; overflow-wrap: normal; white-space: nowrap; }
  /* Garantie (largeur calée sur l'en-tête EN « WARRANTY » ~78px) */
  .explodedviews_block table.explodedviews_ref_table th:nth-child(4),
  .explodedviews_block table.explodedviews_ref_table td:nth-child(4) { width: 84px; text-align: center; }
  /* Prix : jamais coupé */
  .explodedviews_block table.explodedviews_ref_table th:nth-child(5),
  .explodedviews_block table.explodedviews_ref_table td:nth-child(5) { width: 80px; white-space: nowrap; }
  /* Quantité + bouton panier */
  .explodedviews_block table.explodedviews_ref_table th:nth-child(6),
  .explodedviews_block table.explodedviews_ref_table td:nth-child(6) { width: 92px; text-align: center; }
}

/* Wrapper pour le scroll horizontal du tableau sur mobile */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Responsive en dessous de 1200px - Tableau passe sous l'image */
/* Desktop (> 1200px) : image 40% / tableau 60% (au lieu du 50/50 par défaut d'Elementor) */
@media (min-width: 1201px) {
  .explodedviews_block .elementor-column.exploded-view-image {
    width: 40%; max-width: 40%; flex: 0 0 40%;
    /* Image fixe au scroll : sticky sous le header fixe (barre bleue 62px + barre de nav = 108px), calée en haut de sa colonne */
    align-self: flex-start;
    position: sticky;
    top: 120px;
  }
  /* La colonne image ne doit plus être étirée à la hauteur du tableau, sinon le sticky n'a aucun effet */
  .explodedviews_block .elementor-column.exploded-view-image > .elementor-column-wrap {
    height: auto;
  }
  .explodedviews_block .elementor-column.exploded-view-table {
    width: 60%; max-width: 60%; flex: 0 0 60%;
  }
}

@media (max-width: 1200px) {
  /* Réduction de la taille de la typographie */
  #explodedviews {
    font-size: 1.4rem;
  }

  /* Colonnes à 100% de largeur */
  .exploded-view-container {
    flex-direction: column !important;
  }

  .explodedviews_block .elementor-column.exploded-view-image,
  .explodedviews_block .elementor-column.exploded-view-table {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Image responsive */
  .exploded-view-image {
    margin-bottom: 1.5rem;
  }

  /* Navigation pills scrollable */
  .explodedviews_block .nav-pills {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .explodedviews_block .nav-pills a.nav-link {
    white-space: nowrap;
  }

  .explodedviews-tabs-header .nav-pills {
    flex: 1 1 auto;
    min-width: 0;
  }

  .explodedviews-reduction-info {
    flex: 1 1 100%;
    margin-left: 0;
    text-align: right;
    white-space: normal;
  }

  .explodedviews_block .nav-pills::-webkit-scrollbar {
    height: 4px;
  }

  .explodedviews_block .nav-pills::-webkit-scrollbar-thumb {
    background: var(--module-blue);
    border-radius: 2px;
  }
}

/* Responsive Mobile (max-width: 768px) - Transformation en cartes */
@media (max-width: 768px) {
  /* Désactiver le scroll horizontal du wrapper */
  .table-responsive {
    overflow-x: visible;
  }

  /* Cacher l'en-tête du tableau */
  .explodedviews_block table.explodedviews_ref_table thead {
    display: none;
  }

  /* Transformer le tableau en cartes */
  .explodedviews_block table.explodedviews_ref_table,
  .explodedviews_block table.explodedviews_ref_table tbody,
  .explodedviews_block table.explodedviews_ref_table tr,
  .explodedviews_block table.explodedviews_ref_table td {
    display: block;
    width: 100%;
  }

  /* Chaque ligne devient une carte */
  .explodedviews_block table.explodedviews_ref_table tr {
    margin-bottom: 2.5rem;
    border: 1px solid var(--module-gray-light);
    border-radius: 20px;
    padding: 0;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  }

  /* Chaque cellule affiche son label */
  .explodedviews_block table.explodedviews_ref_table td {
    text-align: left;
    padding: .25rem 1rem .25rem 0;
    border: none;
    position: relative;
    padding-left: 42%;
    min-height: auto;
    display: flex;
    align-items: stretch;
    font-size: 1.2rem;
  }

  /* Afficher le label avant chaque valeur - Style des entêtes */
  .explodedviews_block table.explodedviews_ref_table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40%;
    padding: .5rem .5rem .5rem 1.5rem;
    font-weight: bold;
    color: white;
    background-color: var(--module-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0;
    text-transform: uppercase;
    font-size: .85em;
    display: flex;
    align-items: center;
  }

  /* Padding top pour le premier td */
  .explodedviews_block table.explodedviews_ref_table td:first-child {
    padding-top: .5rem;
  }

  /* Arrondi sur le coin supérieur gauche du premier label */
  .explodedviews_block table.explodedviews_ref_table td:first-child::before {
    padding-top: 1rem;
    border-radius: 20px 0 0 0;
  }

  /* Padding bottom pour le dernier td avec label (avant-dernier td) */
  .explodedviews_block table.explodedviews_ref_table td:nth-last-child(2) {
    padding-bottom: .5rem;
  }
  .explodedviews_block table.explodedviews_ref_table td:nth-last-child(2)::before {
    padding-bottom: 1rem;
  }
    

  /* Dernière cellule (bouton panier) centrée sans label */
  .explodedviews_block table.explodedviews_ref_table td:last-child {
    padding-left: 0;
    justify-content: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--module-light-blue-alpha-50);
  }

  .explodedviews_block table.explodedviews_ref_table td:last-child::before {
    content: none;
  }

  /* Cellule "Garantie" : garantit une hauteur minimale même quand elle est vide,
     sinon la cellule s'effondre et le label bleu (positionné top:0/bottom:0) est
     rogné/superposé aux lignes voisines. */
  .explodedviews_block table.explodedviews_ref_table td.garantie-cell {
    min-height: 2.6rem;
  }

  /* Pas d'alternance de couleur sur les lignes en mode carte */
  .explodedviews_block table.explodedviews_ref_table tr:nth-child(even) {
    background-color: white;
  }
}
/* Bouton d'export Excel de la liste des pièces */
.explodedviews_block .exploded-view-export {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .75rem;
}

.explodedviews_block .exploded-view-export-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border: 1px solid var(--module-blue);
  border-radius: 6px;
  color: var(--module-dark-blue);
  background-color: #fff;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.explodedviews_block .exploded-view-export-btn:hover,
.explodedviews_block .exploded-view-export-btn:focus {
  background-color: var(--module-blue);
  color: #fff;
}

.explodedviews_block .exploded-view-export-btn svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .explodedviews_block .exploded-view-export {
    justify-content: flex-start;
    margin-top: 2rem;
  }
}

/* Modale d'erreur d'ajout au panier (stock insuffisant, etc.) */
.explodedview-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: rgba(0, 35, 91, .55);
}
.explodedview-modal-overlay.is-open {
  display: flex;
}
.explodedview-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 35, 91, .3);
  padding: 2.5rem 2rem 2rem;
  animation: explodedview-modal-in .2s ease-out;
}
@keyframes explodedview-modal-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.explodedview-modal-close {
  position: absolute;
  top: .5rem;
  right: .75rem;
  border: none;
  background: none;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--module-dark-blue);
  cursor: pointer;
  padding: .25rem .5rem;
}
.explodedview-modal-close:hover {
  color: var(--module-blue);
}
.explodedview-modal-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  color: #d9534f;
}
.explodedview-modal-title {
  margin: 0;
  font-size: 1.8rem;
  color: var(--module-dark-blue);
}
.explodedview-modal-body {
  color: #333;
  font-size: 1.5rem;
  line-height: 1.45;
}
.explodedview-modal-body p {
  margin: 0 0 .5rem;
}
.explodedview-modal-body p:last-child {
  margin-bottom: 0;
}