/* ============================================================================
BI-NIYATI — Tunnel de don : feuille de styles
============================================================================

Chargé par le plugin Bi-Niyati Customisations (includes/arbre-fruitier.php),
sur tout le site comme auparavant. Déplacé depuis le thème (css/arbre-fruitier.css).

ATTENTION AUX RÈGLES GLOBALES (première section) : elles habillent des
widgets Elementor situés HORS du widget HTML — la vidéo, le palier et le
checkout. Elles ne sont donc volontairement pas préfixées par
.bi-treePlusMinus. Ne les scope pas.
============================================================================ */


/* ============================================================================
1. RÈGLES GLOBALES — habillent des widgets Elementor externes
============================================================================ */
/* ==========================================================================
CSS GLOBAL — habille des widgets situés hors de ce bloc.
Volontairement non scopé.
========================================================================== */

/* ---------- Conteneur deux colonnes : filet de sécurité ---------- */
.bi-twoColsCheckout,
.bi-leftCol,
.bi-rightCol{
  overflow:visible !important;
}
.bi-leftCol{
  position:sticky;
  top:16px;
  align-self:flex-start;
}
.bi-rightCol{ min-width:0; }

@media (max-width: 980px){
  .bi-leftCol{ position:static; top:auto; }
}

/* ---------- Widget Vidéo ---------- */
.bi-videoFrame .elementor-widget-container{
  padding:6px;
  border-radius:26px;
  background:linear-gradient(90deg,#E93D3D,#FFC300);
  box-shadow:0 18px 50px rgba(0,0,0,.12);
  overflow:hidden;
}
.bi-videoFrame .elementor-wrapper{
  border-radius:20px;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(0,0,0,.08);
  aspect-ratio:4/3;
  padding-bottom:0 !important;
  height:auto !important;
}
.bi-videoFrame video,
.bi-videoFrame iframe{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block;
  border-radius:20px;
}

/* ---------- Widget Shortcode : palier ---------- */
.bi-goalWrap{ overflow:visible; }
.bi-goalWrap > *{ width:100%; max-width:100%; }

.bi-goalWrap .bi-heroGoalCard{
  background:linear-gradient(135deg,#e85a3f,#f3a51b);
  border-radius:16px;
  padding:12px 14px;
  color:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.bi-goalWrap .bi-heroGoalTop{ margin:0 0 6px; }
.bi-goalWrap .bi-heroGoalLabel{
  font-size:11px; font-weight:900; letter-spacing:.08em;
  text-transform:uppercase; margin:0 0 6px; opacity:.95; color:#fff;
}
.bi-goalWrap .bi-heroGoalNumbers{
  display:flex; align-items:baseline; gap:6px; margin:0 0 8px; font-weight:900;
}
.bi-goalWrap .bi-heroGoalNumbers strong{ font-size:30px; line-height:1; margin:0; color:#fff; }
.bi-goalWrap .bi-heroGoalNumbers span{ font-size:16px; line-height:1.1; text-transform:uppercase; color:#fff; }
.bi-goalWrap .bi-heroGoalBar{
  height:10px; border-radius:999px; background:rgba(255,255,255,.35);
  overflow:hidden; margin:0 0 8px; border:none;
  min-width:0 !important; width:100%; position:relative;
}
.bi-goalWrap .bi-heroGoalBar::after{ display:none; }
.bi-goalWrap .bi-heroGoalFill{
  height:100%; background:#fff; opacity:.95; border-radius:999px;
  transition:width .5s ease; box-shadow:none;
}
.bi-goalWrap .bi-heroGoalBottom{ display:none; }
.bi-goalWrap .bi-heroGoalHint{
  margin-top:8px; font-weight:800; font-size:13px; line-height:1.35;
  color:#fff; opacity:.96; text-align:left;
}
.bi-goalWrap .bi-heroGoalRemaining{ color:#fff; }

@media (max-width: 640px){
  .bi-goalWrap .bi-heroGoalCard{ padding:10px 12px; border-radius:14px; }
  .bi-goalWrap .bi-heroGoalNumbers strong{ font-size:26px; }
  .bi-goalWrap .bi-heroGoalNumbers span{ font-size:14px; }
  .bi-goalWrap .bi-heroGoalHint{ font-size:12px; }
}

/* ---------- Widget Shortcode : checkout ----------
Masquage par hauteur nulle, PAS display:none : le checkout conserve ainsi
sa largeur réelle. Un conteneur en display:none empêche Stripe et Google
Pay de mesurer leurs boutons au montage — symptôme classique, un bouton
Apple Pay qui n'apparaît jamais. */
.bi-checkoutZone{
  height:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
body.bi-checkout-open .bi-checkoutZone{
  height:auto;
  overflow:visible;
  opacity:1;
  pointer-events:auto;
  margin-top:12px !important;
  animation:biFadeIn .18s ease both;
}
@keyframes biFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  body.bi-checkout-open .bi-checkoutZone{ animation:none; }
}

/* Étape 1 : masquée une fois le checkout révélé, réaffichée sur « Modifier
ma sélection ». Le checkout, lui, reste en place. */
body.bi-checkout-open .bi-treePlusMinus .bi-step-1{ display:none; }
body.bi-checkout-open.bi-checkout-editing .bi-treePlusMinus .bi-step-1{ display:block; }
body.bi-checkout-open .bi-treePlusMinus .bi-backRow{ display:flex; }
body.bi-checkout-open.bi-checkout-editing .bi-treePlusMinus .bi-backRow{ display:none; }

/* ============================================================================
   2. SÉLECTEUR D'ARBRES — contenu du widget HTML
   ============================================================================ */
.bi-treePlusMinus{
  --red:#E93D3D; --yellow:#FFC300; --text:#141414;
  --stroke:rgba(0,0,0,.08); --card:rgba(255,255,255,.68);
  --shadow:0 16px 52px rgba(0,0,0,.10); --shadow2:0 12px 34px rgba(0,0,0,.10);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  padding:14px; background:transparent;
}

.bi-treePlusMinus .bi-tpm-wrap{
  width:100%; max-width:100%; margin:0;
  background:rgba(255,255,255,.60);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  border-radius:20px; padding:14px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  position:relative; overflow:hidden;
}
.bi-treePlusMinus .bi-tpm-wrap::before{
  content:""; position:absolute; inset:-120px;
  background:
    radial-gradient(circle at 18% 20%, rgba(233,61,61,.12), transparent 55%),
    radial-gradient(circle at 82% 26%, rgba(255,195,0,.14), transparent 58%);
  filter:blur(16px); opacity:.7; pointer-events:none;
}
.bi-treePlusMinus .bi-tpm-wrap > *{ position:relative; z-index:1; }

.bi-treePlusMinus .bi-stepHeader{
  text-align:center; font-weight:900; font-size:14px;
  letter-spacing:.08em; text-transform:uppercase;
  color:rgba(20,20,20,.75); margin-bottom:12px;
}

.bi-treePlusMinus .bi-backRow{ display:none; margin-top:12px; justify-content:center; }
.bi-treePlusMinus .bi-backBtn{
  appearance:none; cursor:pointer; padding:12px 18px;
  border-radius:999px; font-weight:950; letter-spacing:.10em; text-transform:uppercase;
  background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.10);
  box-shadow:0 12px 28px rgba(0,0,0,.10); color:rgba(20,20,20,.78);
}

.bi-treePlusMinus .bi-tpm-grid{
  margin-top:12px; display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px; align-items:stretch;
}
.bi-treePlusMinus .bi-tpm-card{
  background:var(--card); border:1px solid var(--stroke);
  border-radius:16px; box-shadow:var(--shadow2); padding:10px;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:8px;
  isolation:isolate; min-width:0;
}
.bi-treePlusMinus .bi-tpm-card::after{
  content:""; position:absolute; inset:-70px;
  background:
    radial-gradient(circle at 22% 18%, rgba(233,61,61,.16), transparent 55%),
    radial-gradient(circle at 86% 20%, rgba(255,195,0,.18), transparent 60%);
  filter:blur(18px); opacity:.55; pointer-events:none; z-index:0;
}
.bi-treePlusMinus .bi-tpm-card > *{ position:relative; z-index:1; }

.bi-treePlusMinus .bi-tpm-top{ display:flex; align-items:center; justify-content:flex-start; gap:8px; min-width:0; }
.bi-treePlusMinus .bi-tpm-id{ display:flex; align-items:center; gap:10px; min-width:0; }
.bi-treePlusMinus .bi-tpm-emoji{
  width:38px; height:38px; display:grid; place-items:center;
  font-size:26px; background:transparent; border:0; box-shadow:none;
  flex:0 0 auto; line-height:1;
}
.bi-treePlusMinus .bi-tpm-label{
  margin:0; font-weight:950; color:var(--text);
  font-size:14px; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.bi-treePlusMinus .bi-tpm-mini{
  margin-top:2px; font-size:12px; font-weight:950;
  color:rgba(20,20,20,.82); letter-spacing:.01em;
}

.bi-treePlusMinus .bi-tpm-qtyRow{
  display:flex; align-items:center; justify-content:center;
  min-height:44px; margin-top:auto;
}
.bi-treePlusMinus .bi-tpm-stepper{
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(255,255,255,.74); border:1px solid rgba(0,0,0,.08);
  border-radius:14px; padding:6px;
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  width:170px; max-width:100%;
}
.bi-treePlusMinus .bi-tpm-btn{
  width:32px; height:32px; border-radius:12px;
  border:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.92);
  cursor:pointer; font-weight:950; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  margin:0; padding:0; flex:0 0 32px;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  min-height: 32px;
}
.bi-treePlusMinus .bi-tpm-btn:focus-visible,
.bi-treePlusMinus .bi-tpm-cta:focus-visible,
.bi-treePlusMinus .bi-backBtn:focus-visible{
  outline:3px solid rgba(233,61,61,.55); outline-offset:2px;
}
.bi-treePlusMinus .bi-tpm-qty{
  width:44px; height:32px; border-radius:12px;
  border:1px solid rgba(0,0,0,.10); background:rgba(255,255,255,.92);
  box-shadow:0 10px 20px rgba(0,0,0,.06);
  font-weight:950; color:var(--text); text-align:center;
  margin:0; padding:0; flex:0 0 44px;
}

.bi-treePlusMinus .bi-tpm-benefWrap{
  margin-top:12px; background:rgba(255,255,255,.70);
  border:1px solid rgba(0,0,0,.08); border-radius:18px; padding:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.08);
}
.bi-treePlusMinus .bi-tpm-benefTop{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin-bottom:8px;
}
.bi-treePlusMinus .bi-tpm-benefTitle{
  margin:0; font-weight:950; color:var(--text);
  font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
}
.bi-treePlusMinus .bi-tpm-check{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:12px;
  background:rgba(255,255,255,.78); border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 20px rgba(0,0,0,.06);
  font-weight:850; color:rgba(20,20,20,.78);
  cursor:pointer; user-select:none; white-space:nowrap;
}
.bi-treePlusMinus .bi-tpm-check input{ width:16px; height:16px; }

.bi-treePlusMinus .bi-tpm-sameRow{ display:none; margin-top:10px; }
.bi-treePlusMinus .bi-tpm-sameRow.is-on{ display:block; }

.bi-treePlusMinus .bi-tpm-fieldLabel{
  display:block; font-weight:900; color:var(--text);
  font-size:12px; margin:0 0 6px 0;
}
.bi-treePlusMinus .bi-tpm-input{
  width:100%; height:42px; border-radius:12px;
  border:1px solid rgba(0,0,0,.10); background:rgba(255,255,255,.94);
  padding:0 12px; font-weight:850; color:var(--text);
  font-size:16px; outline:none;
}
.bi-treePlusMinus .bi-tpm-input::placeholder{
  font-weight:500; opacity:.45; color:rgba(20,20,20,.78);
}

.bi-treePlusMinus .bi-tpm-benefList{ margin-top:10px; display:grid; grid-template-columns:1fr; gap:10px; }
.bi-treePlusMinus .bi-tpm-benefItem{
  display:flex; align-items:center; gap:10px; padding:10px;
  border-radius:16px; border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.74); box-shadow:0 10px 20px rgba(0,0,0,.06);
}
.bi-treePlusMinus .bi-tpm-chip{
  min-width:40px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  font-weight:950; font-size:12px; color:#fff;
  background:linear-gradient(90deg, var(--red), var(--yellow));
  box-shadow:0 12px 24px rgba(233,61,61,.16); flex:0 0 auto;
}
.bi-treePlusMinus .bi-tpm-muted{ color:rgba(20,20,20,.62); font-weight:800; font-size:12px; }

.bi-treePlusMinus .bi-recap{
  margin-top:12px; background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.08); border-radius:18px; padding:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.08);
}
.bi-treePlusMinus .bi-recapTitle{
  margin:0 0 10px 0; font-weight:950; color:var(--text);
  font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
}
.bi-treePlusMinus .bi-recapList{ display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.bi-treePlusMinus .bi-recapLine{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border-radius:14px;
  background:rgba(255,255,255,.80); border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 20px rgba(0,0,0,.06);
  font-weight:900; color:rgba(20,20,20,.84); font-size:13px;
}
.bi-treePlusMinus .bi-recapLeft{ display:flex; align-items:center; gap:10px; min-width:0; }
.bi-treePlusMinus .bi-recapEmoji{
  width:28px; height:28px; display:grid; place-items:center;
  background:transparent; border:0; box-shadow:none;
  flex:0 0 auto; font-size:22px; line-height:1;
}
.bi-treePlusMinus .bi-recapName{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bi-treePlusMinus .bi-recapTotal{
  margin-top:10px; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px; border-radius:14px;
  background:linear-gradient(90deg, rgba(233,61,61,.10), rgba(255,195,0,.12));
  border:1px solid rgba(0,0,0,.08);
  font-weight:950; color:rgba(20,20,20,.92);
}
.bi-treePlusMinus .bi-recapHint{ margin-top:8px; font-size:12px; font-weight:850; color:rgba(20,20,20,.62); }

.bi-treePlusMinus .bi-tpm-ctaRow{ margin-top:12px; display:flex; justify-content:center; }
.bi-treePlusMinus .bi-tpm-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; height:52px; border-radius:999px; border:0;
  font-weight:950; letter-spacing:.10em; text-transform:uppercase; color:#fff;
  background:linear-gradient(90deg, var(--red), var(--yellow));
  box-shadow:0 18px 46px rgba(233,61,61,.18);
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.bi-treePlusMinus .bi-tpm-cta[disabled]{ opacity:.6; cursor:default; }
.bi-treePlusMinus .bi-tpm-cta svg{ width:18px; height:18px; }

.bi-treePlusMinus .bi-tpm-secure{
  margin-top:12px; padding:12px 14px; border-radius:18px;
  background:rgba(255,255,255,.70); border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 36px rgba(0,0,0,.08);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center;
}
.bi-treePlusMinus .bi-tpm-secureTitle{
  font-size:13px; font-weight:900; color:rgba(20,20,20,.78);
  letter-spacing:.04em; text-transform:uppercase;
}
.bi-treePlusMinus .bi-tpm-secureImg{ display:block; width:min(100%,240px); height:auto; }
.bi-treePlusMinus .bi-tpm-secureText{ font-size:13px; font-weight:850; color:rgba(20,20,20,.72); }

.bi-treePlusMinus .bi-tpm-error{
  margin:10px auto 0; max-width:100%;
  background:rgba(233,61,61,.10); border:1px solid rgba(233,61,61,.22);
  color:rgba(20,20,20,.86); padding:10px 12px; border-radius:14px;
  font-weight:850; display:none;
}
.bi-treePlusMinus .bi-tpm-error.is-on{ display:block; }

@media (max-width: 820px){
  .bi-treePlusMinus .bi-tpm-grid{ grid-template-columns:1fr; }
  .bi-treePlusMinus .bi-tpm-card{
    display:grid; grid-template-columns:1fr auto;
    grid-template-areas:"top qty"; column-gap:10px; padding:12px;
  }
  .bi-treePlusMinus .bi-tpm-top{ grid-area:top; }
  .bi-treePlusMinus .bi-tpm-qtyRow{ grid-area:qty; justify-content:flex-end; align-self:center; margin:0; min-height:auto; }
  .bi-treePlusMinus .bi-tpm-stepper{ width:auto; flex:0 0 auto; padding:5px; gap:6px; }
  .bi-treePlusMinus .bi-tpm-btn{ width:30px; height:30px; border-radius:11px; font-size:17px; }
  .bi-treePlusMinus .bi-tpm-qty{ width:40px; height:30px; border-radius:11px; }
  .bi-treePlusMinus .bi-tpm-emoji{ width:40px; height:40px; font-size:28px; }
}

@media (max-width: 640px){
  .bi-treePlusMinus{ padding:0; }
  .bi-treePlusMinus .bi-tpm-wrap{
    padding:14px;
    border-radius:10px;
    margin:20px 0;
  }
  .bi-treePlusMinus .bi-stepHeader{ margin-bottom:6px; font-size:12px; }
  .bi-treePlusMinus .bi-tpm-secure{ margin-top:10px; padding:10px 12px; border-radius:14px; }
  .bi-treePlusMinus .bi-tpm-secureImg{ width:min(100%,210px); }
  .bi-treePlusMinus .bi-backRow{ margin-top:8px; }
  .bi-treePlusMinus .bi-backBtn{ padding:9px 12px; }
}