/* ==========================================================================
   Tarifs — cartes de forfaits en verre, Business mis en avant.
   Les liens de paiement (Stripe) ne sont que restylés : href, data-pay et
   data-fallback restent strictement identiques (voir tarifs.html).
   ========================================================================== */
.pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch;perspective:1400px}
.plan{position:relative;display:flex;flex-direction:column;padding:clamp(28px,3vw,38px)}
.plan h3{font-size:1.1rem;font-weight:600;letter-spacing:-.01em;color:var(--muted);margin-bottom:26px}
.plan .price{display:flex;align-items:baseline;gap:8px;font-size:clamp(3rem,5vw,4.4rem);font-weight:600;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums}
.plan .price .cur{font-size:.95rem;font-weight:500;letter-spacing:.04em;color:var(--muted)}
.price-sub{margin:12px 0 28px;font-size:.9rem;color:var(--muted)}
.price-sub .amt2,.price-sub .cur2{color:var(--text);font-weight:600}
.plan-list{display:grid;gap:12px;padding-block:24px;margin-bottom:28px;border-top:1px solid var(--line)}
.plan-list li{display:flex;gap:12px;font-size:.93rem;line-height:1.45}
.plan-list li::before{
  content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5E1FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat,var(--iris-soft);
  border:1px solid rgba(255,255,255,.14);
}
.plan-actions{display:grid;gap:10px;margin-top:auto}

/* forfait mis en avant */
.plan.feat{background:linear-gradient(165deg,rgba(192,132,252,.16),rgba(244,114,182,.05) 55%,rgba(255,255,255,.02));box-shadow:var(--glass-shadow),0 40px 120px -40px rgba(192,132,252,.55)}
.plan.feat h3{color:var(--text)}
.plan.feat .price .amt{background:var(--iris);-webkit-background-clip:text;background-clip:text;color:transparent}
/* à cheval sur le bord haut de la carte : ne recouvre jamais le titre, quelle que soit la langue */
.plan .tag{
  position:absolute;top:0;inset-inline-end:22px;z-index:3;transform:translateY(-50%);white-space:nowrap;padding:6px 12px;border-radius:var(--radius-pill);
  font-size:.72rem;font-weight:600;color:#0B0B10;background:var(--iris);box-shadow:0 8px 24px -8px rgba(244,114,182,.7);
}
@media (min-width:901px){.plan.feat{margin-block:-14px}}

/* bandeau moyens de paiement */
.pay-strip{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin-top:28px;padding:16px 22px;border-radius:var(--radius-pill);
}
.pay-strip .lbl{display:inline-flex;align-items:center;gap:10px;font-size:.88rem;color:var(--text)}
.pay-strip .lbl svg{width:18px;height:18px;stroke:#34D399}
.pay-badges{display:flex;flex-wrap:wrap;gap:8px}
.pay-badges span{
  padding:6px 12px;border-radius:10px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);
}

/* abonnement mensuel (contient le lien Stripe de l'abonnement, traduit dans home.subNote) */
.sub-note{display:flex;gap:16px;align-items:flex-start;margin-top:18px;padding:22px 24px;border-radius:var(--radius);font-size:.94rem;color:var(--muted)}
.sub-note svg{flex:none;width:22px;height:22px;stroke:#F472B6;margin-top:2px}
.sub-note b{color:var(--text);font-weight:600}
.sub-note a{color:#F0ABFC;font-weight:600;border-bottom:1px solid rgba(240,171,252,.4);white-space:nowrap}
.sub-note a:hover{border-color:#F0ABFC}

.flyers-layout{display:flex;justify-content:center}
.flyer-plan{width:100%;max-width:440px}

/* mobile : carrousel glissable (voir js/core/carousel.js) */
@media (max-width:900px){
  .pricing{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter));padding:18px var(--gutter) 22px;
    direction:ltr; /* le carrousel se calcule en coordonnées gauche → droite, même en arabe */
  }
  .pricing::-webkit-scrollbar{display:none}
  .pricing .plan{flex:0 0 min(86%,380px);scroll-snap-align:center}
  html[dir="rtl"] .pricing .plan{direction:rtl}
  .pricing.grabbing{scroll-snap-type:none;cursor:grabbing}
  .pay-strip{border-radius:var(--radius)}
}