/* plans.css — présentation CENTRALISÉE des formules (cartes + sélecteur de période).
   Source UNIQUE du style des formules, partagée par pricing.php ET la landing (index.php).
   Déplacé depuis app.css pour être réutilisable hors de l'espace authentifié.
   Dépend des tokens de base.css (--surface, --accent, --r-*, .btn…), chargés partout.
   Rendu par bs_render_plans() → includes/plans-render.php. */

/* Conteneur : requête de conteneur → les cartes se réagencent selon la largeur DISPONIBLE
   (utile car /pricing a une sidebar et la landing non — un même seuil viewport ne convient pas aux deux). */
.plans-block { container-type: inline-size; }

/* ---------- Grille + carte ---------- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; transition: border-color .2s, box-shadow .2s, transform .2s ease; }
.plan:hover { border-color: color-mix(in oklch, var(--accent) 40%, var(--border)); box-shadow: 0 22px 50px -38px color-mix(in oklch, var(--accent) 55%, transparent); transform: translateY(-2px); }
.plan.is-highlight { border-color: color-mix(in oklch, var(--accent) 55%, var(--border)); box-shadow: 0 24px 60px -40px color-mix(in oklch, var(--accent) 60%, transparent); }
.plan__tag { position: absolute; top: -10px; left: 24px; background: var(--accent); color: var(--bg); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; padding: 4px 9px; border-radius: var(--r-xs); }
.plan__name { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; }
.plan__tagline { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.plan__price { margin: 18px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.plan__amount { font-size: 38px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan__period { font-size: 12.5px; color: var(--faint); }
.plan__features { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.plan__features li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--muted); }
.plan__features svg { flex: none; margin-top: 2px; color: var(--accent); }
.plan__cta { margin-top: auto; }
.plan__current { margin-top: auto; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--accent); border: 1px dashed color-mix(in oklch, var(--accent) 45%, var(--border)); border-radius: var(--r); padding: 11px; }
.pay-note { margin-top: 22px; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--faint); }

/* ---------- Sélecteur de période ---------- */
.period-toggle { display: flex; width: fit-content; gap: 4px; margin: 0 auto 26px; padding: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); }
.period-toggle__btn { position: relative; display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: var(--r-sm); cursor: pointer; transition: background .15s, color .15s; }
.period-toggle__btn:hover { color: var(--text); }
.period-toggle__btn.is-on { background: var(--accent); color: var(--bg); }
.period-toggle__save { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; padding: 2px 6px; border-radius: var(--r-xs); background: color-mix(in oklch, var(--ok) 22%, transparent); color: var(--ok); }
.period-toggle__btn.is-on .period-toggle__save { background: color-mix(in oklch, var(--bg) 25%, transparent); color: var(--bg); }

/* ---------- Cartes formule : achat (mode checkout, /pricing) ---------- */
.plan.is-current { border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); }
.plan__tag--current { left: auto; right: 24px; background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }
.plan__hint { margin: -2px 0 8px; font-size: 11.5px; color: var(--warn); }
.plan__note { margin-top: auto; text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--faint); border: 1px dashed var(--border); border-radius: var(--r); padding: 11px; }
.plan__buy { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Logos de marque (composant partagé pricing + checkout) ---------- */
.pay-logo { height: 22px; width: auto; display: inline-block; vertical-align: middle; flex: none; }
/* Logos carte/PayPal : chip blanc → lisibles en thème clair ET sombre. */
.pay-logo--chip { height: 26px; box-sizing: border-box; padding: 4px 6px; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px rgba(16, 20, 30, .08); }

/* ---------- « Tout <plan>, plus : » — chaînage de valeur entre paliers ---------- */
.plan__builds {
  margin: 4px 0 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

/* ---------- Bandeau « paiement sécurisé » (UNE fois sous la grille : pricing + landing) ---------- */
.pay-trust {
  max-width: 920px;
  margin: 34px auto 0;
  padding: 16px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in oklch, var(--accent) 4%, var(--surface2));
}
.pay-trust__main { display: flex; align-items: center; gap: 13px; text-align: left; }
.pay-trust__badge {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px;
  color: var(--ok);
  background: color-mix(in oklch, var(--ok) 14%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--ok) 30%, var(--border));
}
.pay-trust__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-trust__title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.pay-trust__sub { font-size: 12px; color: var(--muted); line-height: 1.35; }
.pay-trust__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.pay-trust .pay-logo { height: 27px; }
.pay-trust .pay-logo--chip { height: 31px; padding: 4px 6px; }
.pay-trust__sep { width: 1px; align-self: stretch; min-height: 26px; background: var(--border); margin: 0 2px; }
.pay-trust__more { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--muted); align-self: center; }

@media (max-width: 720px) {
  .pay-trust { flex-direction: column; align-items: stretch; text-align: center; gap: 16px; }
  .pay-trust__main { justify-content: center; }
  .pay-trust__logos { justify-content: center; }
}
@media (max-width: 560px) {
  .pay-trust { padding: 16px 14px; }
  .pay-trust .pay-logo { height: 22px; }
  .pay-trust .pay-logo--chip { height: 26px; }
  .pay-trust__sep { display: none; }
}

/* ---------- Réagencement selon la largeur du conteneur ---------- */
@container (max-width: 900px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@container (max-width: 480px) { .plans { grid-template-columns: 1fr; } }

/* Repli si les requêtes de conteneur ne sont pas supportées → seuils viewport. */
@supports not (container-type: inline-size) {
  @media (max-width: 1080px) { .plans { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px)  { .plans { grid-template-columns: 1fr; } }
}