/* ==================================================
ÆKOZ - PRICING.CSS
Styles spécifiques à pricing.html

Le switch Mensuel / Annuel est piloté par pricing.js :
- mensuel par défaut
- annuel via .pricing-page.is-yearly
================================================== */


/* ==================================================
PAGE
================================================== */

.pricing-page {
  background: var(--color-bg);
}

.pricing-section {
  position: relative;
  overflow: hidden;
}


/* ==================================================
HERO PRICING
================================================== */

.pricing-hero {
  min-height: 100svh;

  display: flex;
  align-items: center;

  padding-top: 160px;
  padding-bottom: 120px;

  background:
    radial-gradient(
      circle at top,
      rgba(231,79,1,0.12),
      transparent 34%
    ),
    radial-gradient(
      circle at 50% 38%,
      rgba(73,91,105,0.20),
      transparent 44%
    ),
    var(--color-bg);
}

.pricing-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pricing-hero__header {
  max-width: 980px;

  margin-bottom: 54px;

  text-align: center;
}

.pricing-hero__title {
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.pricing-hero__text {
  max-width: 720px;

  margin: 28px auto 0;

  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.55;

  color: var(--color-text-soft);
}


/* ==================================================
PRICING TOGGLE
================================================== */

.pricing-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 4px;

  padding: 5px;

  margin-bottom: 54px;

  border-radius: var(--radius-full);

  background: rgba(255,255,255,0.035);

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 18px 50px rgba(0,0,0,0.24);
}

.pricing-toggle__button {
  min-width: 116px;

  padding: 11px 18px;

  border-radius: var(--radius-full);

  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);

  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.pricing-toggle__button span {
  color: inherit;
}

.pricing-toggle__button.is-active {
  color: #000;

  background: var(--color-orange);

  box-shadow:
    0 0 26px rgba(231,79,1,0.34);
}

.pricing-toggle__button:not(.is-active):hover {
  color: var(--color-text);

  background: rgba(255,255,255,0.04);
}


/* ==================================================
PRICING CARDS
================================================== */

.pricing-cards {
  width: min(100%, 980px);

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.pricing-card {
  position: relative;

  min-height: 500px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 46px 42px 36px;

  border-radius: 10px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 24px 80px rgba(0,0,0,0.34);

  transition:
    transform var(--transition-medium),
    border-color var(--transition-medium),
    box-shadow var(--transition-medium);
}

.pricing-card:hover {
  transform: translateY(-5px);
}

.pricing-card--free {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0)
    ),
    var(--surface-secondary);
}

.pricing-card--premium {
  background:
    radial-gradient(
      circle at top,
      rgba(231,79,1,0.16),
      transparent 48%
    ),
    linear-gradient(
      180deg,
      rgba(20,2,10,0.98),
      rgba(12,16,28,0.98)
    );

  border-color: rgba(231,79,1,0.22);

  box-shadow:
    0 24px 90px rgba(0,0,0,0.42),
    0 0 42px rgba(231,79,1,0.08);
}

.pricing-card--pro {
  background:
    linear-gradient(
      180deg,
      #F04D00,
      #D83800
    );

  border-color: rgba(255,255,255,0.08);
}

.pricing-card--premium:hover {
  border-color: rgba(231,79,1,0.38);

  box-shadow:
    0 30px 110px rgba(0,0,0,0.48),
    0 0 54px rgba(231,79,1,0.14);
}

.pricing-card--pro:hover {
  box-shadow:
    0 30px 100px rgba(0,0,0,0.42),
    0 0 54px rgba(231,79,1,0.16);
}

.pricing-card__badge {
  position: absolute;
  top: 18px;
  right: 18px;

  padding: 7px 12px;

  border-radius: var(--radius-full);

  background: rgba(231,79,1,0.14);

  border: 1px solid rgba(231,79,1,0.28);

  color: var(--color-orange);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.pricing-card__title {
  margin-bottom: 34px;

  font-size: clamp(26px, 2vw, 34px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.pricing-card__price {
  margin-bottom: 12px;

  font-size: clamp(42px, 4vw, 58px);
  line-height: 1;
  font-weight: var(--weight-bold);
  letter-spacing: -0.055em;
}

.pricing-card__note {
  min-height: 48px;

  margin-bottom: 44px;

  color: rgba(255,255,255,0.60);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.pricing-card--pro .pricing-card__note {
  color: rgba(255,255,255,0.72);
}

.pricing-card__features {
  display: grid;
  gap: 20px;

  margin-bottom: 36px;
}

.pricing-card__features li {
  position: relative;

  padding-left: 28px;

  color: rgba(255,255,255,0.78);
  font-size: var(--text-md);
  line-height: 1.45;
}

.pricing-card__features li::before {
  content: "✓";

  position: absolute;
  left: 0;
  top: 0;

  color: rgba(255,255,255,0.86);
}

.pricing-card__cta {
  width: 100%;
}


/* ==================================================
SWITCH PRIX MENSUEL / ANNUEL
================================================== */

.pricing-price--yearly,
.pricing-note--yearly {
  display: none;
}

.pricing-page.is-yearly .pricing-price--monthly,
.pricing-page.is-yearly .pricing-note--monthly {
  display: none;
}

.pricing-page.is-yearly .pricing-price--yearly,
.pricing-page.is-yearly .pricing-note--yearly {
  display: inline;
}

.pricing-page.is-yearly .pricing-note--yearly {
  display: block;
}


/* ==================================================
COMPARAISON
================================================== */

:root {
  --comparison-column-width: 140px;
}

.pricing-comparison {
  padding-top: 140px;
  padding-bottom: 80px;

  background:
    radial-gradient(
      circle at 70% 10%,
      rgba(73,91,105,0.16),
      transparent 34%
    ),
    var(--color-bg);
}

.pricing-comparison__inner {
  max-width: 1180px;
}

.pricing-comparison__header {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: end;

  padding-bottom: 40px;

  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.pricing-comparison__header h2 {
  font-size: clamp(32px, 4vw, 48px);
}

.pricing-comparison__plans {
  display: grid;

  grid-template-columns:
    var(--comparison-column-width)
    var(--comparison-column-width)
    var(--comparison-column-width);

  justify-content: center;

  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.pricing-comparison__plans span {
    text-align: center;
}

.comparison-category {
  padding-top: 58px;
  padding-bottom: 44px;

  border-bottom: 1px solid rgba(255,255,255,0.09);
}

.comparison-category__title {
  margin-bottom: 42px;

  color: var(--color-orange);
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.04em;
}

.comparison-table {
  display: grid;
  gap: 0;
}

.comparison-row {
  display: grid;

  grid-template-columns:
    1fr
    var(--comparison-column-width)
    var(--comparison-column-width)
    var(--comparison-column-width);

  gap: 0;
  align-items: center;

  min-height: 112px;
}

.comparison-feature {
  padding-right: 48px;
}

.comparison-feature strong {
  display: block;

  margin-bottom: 12px;

  color: var(--color-text);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.2;
}

.comparison-feature p {
  max-width: 440px;

  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.comparison-check,
.comparison-cross {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 34px;
  line-height: 1;
}

.comparison-check {
  color: #00B96B;
}

.comparison-cross {
  color: #D72222;
}


/* ==================================================
NON PROFIT / ASSOCIATIONS
================================================== */

.pricing-npo {
  padding-top: 100px;
  padding-bottom: 150px;

  background: var(--color-bg);
}

.pricing-npo__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr auto;
  gap: 72px;
  align-items: center;

  max-width: 1180px;

  margin-inline: auto;

  padding-top: 58px;
  padding-bottom: 58px;

  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.pricing-npo__title h2 {
  max-width: 420px;

  font-size: clamp(32px, 4vw, 52px);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.pricing-npo__title .title-accent {
  display: block;

  margin-bottom: 4px;

  color: var(--color-orange);
}

.pricing-npo__text {
  display: grid;
  gap: 10px;
}

.pricing-npo__text p {
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.pricing-npo__action {
  display: flex;
  justify-content: flex-end;
}


/* ==================================================
RESPONSIVE TABLETTE
================================================== */

@media (max-width: 1024px) {

  .pricing-cards {
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  .pricing-card {
    min-height: auto;
  }

  .pricing-comparison__header {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .pricing-comparison__plans {
    width: 420px;
    max-width: 100%;
  }

  .comparison-row {
    grid-template-columns: 1fr 110px 110px 110px;
  }

  .pricing-npo__inner {
    grid-template-columns: 1fr;
    gap: 34px;
    text-align: left;
  }

  .pricing-npo__action {
    justify-content: flex-start;
  }

}


/* ==================================================
RESPONSIVE MOBILE
================================================== */

@media (max-width: 768px) {

  .pricing-hero {
    min-height: auto;

    padding-top: 130px;
    padding-bottom: 90px;
  }

  .pricing-hero__header {
    margin-bottom: 42px;
  }

  .pricing-toggle {
    width: 100%;
    max-width: 360px;
  }

  .pricing-toggle__button {
    flex: 1;
    min-width: 0;

    padding-inline: 12px;

    font-size: 13px;
  }

  .pricing-card {
    padding: 38px 28px 30px;
  }

  .pricing-card__badge {
    position: static;

    width: fit-content;

    margin-bottom: 22px;
  }

  .pricing-comparison {
    padding-top: 96px;
  }

  .pricing-comparison__plans {
    display: none;
  }

  .comparison-category {
    padding-top: 48px;
    padding-bottom: 34px;
  }

  .comparison-row {
    grid-template-columns: 1fr repeat(3, 44px);
    gap: 12px;

    min-height: auto;

    padding: 24px 0;

    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .comparison-row:last-child {
    border-bottom: none;
  }

  .comparison-feature {
    padding-right: 10px;
  }

  .comparison-feature strong {
    font-size: 17px;
  }

  .comparison-feature p {
    font-size: 13px;
  }

  .comparison-check,
  .comparison-cross {
    font-size: 28px;
  }

  .pricing-npo {
    padding-top: 70px;
    padding-bottom: 100px;
  }

  .pricing-npo__inner {
    padding-top: 44px;
    padding-bottom: 44px;
  }

}


/* ==================================================
PETIT MOBILE
================================================== */

@media (max-width: 480px) {

  .pricing-cards {
    width: 100%;
  }

  .pricing-card__price {
    font-size: 42px;
  }

  .comparison-row {
    grid-template-columns: 1fr repeat(3, 34px);
    gap: 8px;
  }

  .comparison-check,
  .comparison-cross {
    font-size: 24px;
  }

}