/* ============================================================
   La Boutique Solaire — Widget Oney (fiche produit + packs AP5)
   Habillage custom du hook produit du module threebyfouroney.
   Chargé via <link> dans le template surchargé :
   themes/van-pv-modez/modules/threebyfouroney/views/templates/hook/product/simulation_sentence.tpl
   Ne remplace PAS le CSS du module (il reste actif ailleurs : bannières, panier, checkout).
   ============================================================ */

#threebyfouroney-simulation-sentence.lbs-oney {
  --oney-green: #81bc00;
  --oney-green-tint: #f2f8e6;
  --lbs-ink: #1a1a2e;
  --lbs-muted: #7a7f87;
  --lbs-line: #e4e7ec;

  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  margin-bottom: 15px;
}

/* Version relocalisée dans le bloc d'achat AP5 (sous la carte SOUS-TOTAL).
   Le parent d'origine (.tax-shipping-delivery-label) est masqué par le thème :
   le widget est déplacé ici par custom-oney.js pour redevenir visible. */
#threebyfouroney-simulation-sentence.lbs-oney.lbs-oney--ap5 {
  display: block;
  margin: 0 0 20px;
  max-width: none;
  width: 100%;
}

/* Rapproche le widget Oney de la carte SOUS-TOTAL (demande : margin-bottom 1rem au lieu de 2).
   Placé ici (chargé avec ?v= sur les pages produit) plutôt que dans custom.css qui n'a pas de
   cache-buster ; sélectivité renforcée pour l'emporter sur #product .sub-total-card. */
#product .product-add-to-cart .sub-total-card {
  margin-bottom: 1rem;
}

/* Ligne principale : logo + onglets */
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap; /* le lien reste sur la ligne des onglets ; ce sont les onglets qui s'enroulent */
}

#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__logo {
  height: 22px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

/* Le thème force `svg { fill:none !important; stroke:currentColor !important }` (icônes) :
   on rétablit le logo Oney plein (vert), sans contour. */
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__logo,
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__logo path {
  fill: #84bd06 !important;
  stroke: none !important;
}

/* Onglets (pills) */
/* État REPLIÉ (défaut au chargement) : on ne montre que le logo + les onglets.
   Le montant et le détail n'apparaissent qu'après un clic sur un onglet.
   L'avertissement (.lbs-oney__legal) reste TOUJOURS visible (demande Oney/direction) :
   replié il se place juste sous les financements ; à l'ouverture, le montant et le
   détail s'insèrent au-dessus et le poussent vers le bas (il suit l'ouverture). */
#threebyfouroney-simulation-sentence.lbs-oney.lbs-oney--collapsed .lbs-oney__bottom,
#threebyfouroney-simulation-sentence.lbs-oney.lbs-oney--collapsed .lbs-oney__detail {
  display: none !important;
}

#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 1 auto;
  min-width: 0;
}

#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__tab {
  border: 1.5px solid var(--lbs-line);
  background: #fff;
  color: var(--lbs-muted);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: .15s;
  min-width: 48px;
  text-align: center;
  font-family: inherit;
}

#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__tab:hover {
  border-color: var(--oney-green);
  color: var(--oney-green);
}

#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__tab.is-active {
  border-color: var(--oney-green);
  color: var(--oney-green);
  background: var(--oney-green-tint);
  box-shadow: 0 0 0 3px rgba(129, 188, 0, .15); /* halo vert de l'onglet actif */
}

/* Pas de contour de focus du navigateur au clic souris (on garde le focus clavier
   pour l'accessibilité, et le halo .is-active reste, lui, intact) */
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__tab:focus:not(:focus-visible),
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__link:focus:not(:focus-visible) {
  outline: none;
}

/* Bas : montant + lien */
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__bottom {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__amount {
  font-size: 16px;
  color: var(--lbs-ink);
  min-height: 20px;
}

#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__amount strong {
  font-weight: 800;
}

#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__amount .lbs-oney__free,
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__amount .lbs-oney__fee {
  color: var(--lbs-muted);
  font-weight: 500;
}

/* État "mise à jour du montant" pendant que le total AP5 se recalcule (config modifiée) :
   on estompe les onglets ET le lien "Voir les mensualités" (sinon il ouvrirait le pop-in
   sur l'ancien montant), l'indicateur de calcul prend la place du montant. */
#threebyfouroney-simulation-sentence.lbs-oney.lbs-oney--recalc .lbs-oney__tabs,
#threebyfouroney-simulation-sentence.lbs-oney.lbs-oney--recalc .lbs-oney__link {
  opacity: .45;
  pointer-events: none;
}

/* Indicateur "calcul de la mensualité en cours" (plans payants) */
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__calc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lbs-muted);
  font-weight: 500;
  font-size: 14px;
}
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__spin {
  width: 14px;
  height: 14px;
  border: 2px solid var(--lbs-line);
  border-top-color: var(--oney-green);
  border-radius: 50%;
  display: inline-block;
  animation: lbsOneySpin .7s linear infinite;
  flex: 0 0 auto;
}
@keyframes lbsOneySpin {
  to { transform: rotate(360deg); }
}

/* Skeleton de chargement du montant (le temps qu'Oney réponde) */
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__amount.is-loading {
  color: transparent;
  position: relative;
}
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__amount.is-loading::after {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 160px;
  height: 15px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: lbsOneyShimmer 1.2s ease-in-out infinite;
}
@keyframes lbsOneyShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Lien "Voir les mensualités" — noir + souligné (demande client) */
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__link {
  color: var(--lbs-ink);
  font-weight: 400;
  font-size: 12px;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  flex: 0 0 auto;
}
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__link:hover {
  text-decoration: underline;
  opacity: .8;
}

/* Conteneur caché où Oney rend son bloc officiel (on en extrait le montant) */
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__oney-source {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Mention du moyen de paiement, affichée quand seules les offres carte bancaire
   sont proposées (demande Oney) : discrète, à côté des onglets. */
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__mode {
  font-size: 13px;
  color: var(--lbs-muted);
  white-space: nowrap;
}

/* Détail compact sous la mensualité : coût du financement et TAEG (offres payantes).
   Libellé et valeur collés, alignés à gauche, séparés par deux points. */
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__detail {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--lbs-muted);
  text-align: left;
}
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__detail b {
  color: var(--lbs-ink);
  font-weight: 600;
}

/* Phrase de prévention crédit, affichée pour toutes les offres Oney (3x/4x comprises).
   Même corps que le montant des mensualités, pour rester bien visible. */
#threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__legal {
  margin: 4px 0 0;
  padding-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--lbs-ink);
}

/* Responsive */
/* Mobile : marge du prix réduite (rapproche le prix du widget Oney qui suit). */
@media (max-width: 767.98px) {
  #product .product-prices .current-price {
    margin: 10px 0 !important;
  }
}

@media (max-width: 575.98px) {
  /* Mobile : le logo et « En savoir plus » sur la 1re ligne, les onglets en dessous
     sur toute la largeur (sinon ils s'enroulent de façon désordonnée dans une colonne étroite). */
  #threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__row {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  #threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__link {
    order: 2;
    margin-left: auto;
  }
  #threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__tabs {
    order: 3;
    flex: 1 1 100%;
  }
  #threebyfouroney-simulation-sentence.lbs-oney .lbs-oney__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}