/**
 * LynxoTV — Formules page only
 * Loaded after style.css when $current_page === 'formules'
 */

/* ——— Page Formules ——— */
#tarifs {
  scroll-margin-top: 84px;
}

/* Formules — centered premium hero (title, lines, CTA) */
.page-formules .hero.page-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: clamp(var(--space-4), 5.5vw, 3.5rem);
  padding-bottom: clamp(var(--space-3), 4vw, 2.75rem);
}

.page-formules .page-hero-inner {
  width: 100%;
  max-width: 42rem;
}

.page-formules .page-hero .hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.page-formules .page-hero .hero-text h1 {
  max-width: min(100%, 22rem);
  text-align: center;
}

.page-formules .page-hero .desc,
.page-formules .page-hero .hero-trust {
  text-align: center;
}

.page-formules .page-hero .cta-row {
  justify-content: center;
  width: 100%;
}

/* Section rhythm — pricing strongest; other blocks compact */
.page-formules .formules-why,
.page-formules .formules-trust {
  padding-block: var(--section-y-tight);
}

.page-formules .pricing {
  padding-block: var(--section-y);
}

/* Support CTA — see .formules-support-cta at end of file */

/* — Why LynxoTV — */
.formules-why {
  background:
    radial-gradient(ellipse 85% 55% at 50% 0%, rgba(37, 99, 235, 0.09), transparent 55%),
    linear-gradient(180deg, rgba(5, 10, 20, 0.35) 0%, transparent 45%);
}

.formules-why-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  max-width: 56rem;
}

.formules-why-item,
.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 100%;
  padding: var(--space-2);
  border-radius: var(--radius-card-sm);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-formules-why);
  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease,
    background 0.28s ease;
}

@media (hover: hover) {
  .formules-why-item:hover,
  .feature-card:hover {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.28);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: var(--shadow-formules-why-hover);
  }
}

.formules-why-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(59, 130, 246, 0.08);
  color: #93c5fd;
}

.formules-why-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.formules-why-text {
  font-size: var(--fs-nav);
  line-height: 1.48;
  font-weight: 500;
  color: rgba(197, 208, 224, 0.95);
  padding-top: 0;
}

@media (max-width: 900px) {
  .formules-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .formules-why-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* — Trust — */
.formules-trust .section-head {
  margin-bottom: var(--space-2);
}

.formules-trust-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 38rem;
  display: grid;
  gap: var(--space-2);
}

.formules-trust-item,
.trust-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 18px;
  min-height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9375rem;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(197, 208, 224, 0.94);
  box-shadow: 0 0 0 transparent;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.formules-trust-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(50, 213, 131, 0.12);
  color: #4ade80;
  box-shadow: 0 0 0 transparent;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.formules-trust-check + span {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.formules-trust-check svg {
  width: 14px;
  height: 14px;
}

@media (hover: hover) {
  .formules-trust-item:hover,
  .trust-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.055);
    box-shadow:
      0 10px 28px rgba(0, 0, 0, 0.22),
      0 0 0 1px rgba(96, 165, 250, 0.1),
      0 0 32px rgba(37, 99, 235, 0.14);
  }

  .formules-trust-item:hover .formules-trust-check,
  .trust-card:hover .formules-trust-check {
    transform: scale(1.07);
    background: rgba(50, 213, 131, 0.14);
    box-shadow:
      0 0 14px rgba(74, 222, 128, 0.22),
      0 0 6px rgba(50, 213, 131, 0.12);
  }

  .formules-trust-item:hover .formules-trust-check + span,
  .trust-card:hover .formules-trust-check + span {
    transform: translateX(4px);
  }
}

/* ——— Support CTA: centered column — title → subtitle → blue primary button ——— */
.page-formules .formules-support-cta {
  width: 100%;
  margin: clamp(var(--space-4), 4vw, var(--space-5)) 0 0;
  padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 3.75rem);
  border: none;
  box-shadow: none;
  text-align: center;
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(59, 130, 246, 0.16), transparent 58%),
    radial-gradient(ellipse 85% 55% at 50% 100%, rgba(37, 99, 235, 0.1), transparent 52%),
    linear-gradient(180deg, rgba(18, 32, 64, 0.92) 0%, rgba(10, 20, 42, 0.88) 50%, rgba(6, 12, 28, 0.94) 100%);
}

.page-formules .formules-support-cta__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.page-formules .formules-support-cta__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}

.page-formules .formules-support-cta__title {
  margin: 0;
  width: 100%;
  font-size: clamp(1.25rem, 1.8vw + 0.85rem, 1.625rem);
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: #f8fafc;
}

.page-formules .formules-support-cta__text {
  margin: 0.65rem 0 0;
  padding: 0;
  width: 100%;
  max-width: 38.75rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  font-weight: 500;
  color: rgba(186, 198, 220, 0.93);
}

.page-formules .formules-support-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin: 1.1rem 0 0;
  width: 100%;
}

.page-formules .formules-support-cta__buttons .formules-support-cta__btn {
  margin: 0;
}

/* Blue primary CTA (same tokens as site .btn-primary; scoped so it never reads as a plain link) */
.page-formules a.formules-support-cta__btn--primary {
  box-sizing: border-box;
  margin: 0;
  align-self: center;
  width: auto;
  max-width: 100%;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  min-height: unset;
  font-size: var(--btn-font-size);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none !important;
  color: #fff !important;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-btn);
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.page-formules a.formules-support-cta__btn--primary:visited {
  color: #fff !important;
}

.page-formules .formules-support-cta__btn-icon {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  flex-shrink: 0;
  display: block;
  vertical-align: middle;
  opacity: 0.95;
}

.page-formules .formules-support-cta__btn-label {
  flex: 0 0 auto;
}

.page-formules a.formules-support-cta__btn--primary:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.85);
  outline-offset: 3px;
}

@media (hover: hover) {
  .page-formules a.formules-support-cta__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-hover);
    filter: brightness(1.05);
  }
}

.page-formules a.formules-support-cta__btn--primary:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

/* Telegram — même gabarit, couleur officielle */
.page-formules a.formules-support-cta__btn--telegram {
  box-sizing: border-box;
  margin: 0;
  align-self: center;
  width: auto;
  max-width: 100%;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  min-height: unset;
  font-size: var(--btn-font-size);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none !important;
  color: #fff !important;
  background: linear-gradient(135deg, #229ed9 0%, #1e8bc4 100%);
  box-shadow: 0 8px 22px rgba(34, 158, 217, 0.35);
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.page-formules a.formules-support-cta__btn--telegram:visited {
  color: #fff !important;
}

.page-formules a.formules-support-cta__btn--telegram:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.85);
  outline-offset: 3px;
}

@media (hover: hover) {
  .page-formules a.formules-support-cta__btn--telegram:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(34, 158, 217, 0.45);
    filter: brightness(1.05);
  }
}

.page-formules a.formules-support-cta__btn--telegram:active {
  transform: translateY(0);
  filter: brightness(0.97);
}