/* ===========================================
   PRICING-PRO — Section 9 « Combien ça coûte ? Pas de mystère. »
   Méthode de calcul du devis B2B :
     - intro de rassurance
     - 4 cartes "variables" numérotées (violet uniforme = "4 aspects d'UNE méthode")
     - tarif horaire ancré, centré, ombre saumon brand (eye-catcher)
   Aucun bouton ici : le CTA final est 2 sections plus bas.
   Patterns réutilisés : brutalist shadow + 2px border (verticals), tarif ancré
   centré (pricing.css particulier), reveal slide-up/slide-from-right cascadé.
   =========================================== */

.pricing-pro {
  padding: 100px 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.pricing-pro__heading {
  width: 100%;
  max-width: 1270px;
  padding: 10px;
  margin: 0;
  font-size: 36px;
  font-weight: var(--fw-semibold);
  line-height: 54px;
  text-align: center;
  color: var(--color-text);
}

.pricing-pro__heading-accent {
  color: var(--color-accent);
}

.pricing-pro__intro {
  max-width: 800px;
  margin: 0;
  padding: 0 10px;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  color: var(--color-text);
}

/* --- 4 cartes variables — grille 2×2 desktop, 1 col mobile --- */
.pricing-pro__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  width: 100%;
  max-width: 1270px;
}

/* Pattern brutalist identique aux cards verticals. Couleur uniforme violet :
   signal visuel "4 aspects d'UNE méthode" (contrairement aux 4 cibles
   distinctes de la section verticals qui ont 4 couleurs). Rhyme aussi avec
   la card Mensuelle violet de Particulier section 8. */
.pricing-pro-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 40px 30px;
  background-color: var(--color-bg);
  border: 2px solid var(--color-text);
  box-shadow: 8px 8px 0 0 var(--color-violet);
}

/* Le numéro 01-04 prend la place de l'icône — l'œil voit "série ordonnée"
   au lieu de "liste hétérogène". --color-violet-dark pour la lisibilité
   (le violet light de l'ombre est trop pâle pour de la typo). */
.pricing-pro-card__number {
  margin: 0;
  font-size: 56px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-violet-dark);
}

.pricing-pro-card__title {
  margin: 0;
  font-size: 22px;
  font-weight: var(--fw-semibold);
  line-height: 30px;
  color: var(--color-text);
}

.pricing-pro-card__description {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
}

/* --- Tarif ancré : bloc central, mise en avant maximale du prix ---
   Ombre accent (saumon brand) : c'est le seul élément accent de la section,
   il accroche l'œil immédiatement. Pas de barre/flèche comme sur Particulier
   parce qu'on n'a pas de réduction crédit d'impôt à montrer en B2B — on a
   un prix net qui se suffit à lui-même. */
.pricing-pro__rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 700px;
  padding: 40px 50px;
  text-align: center;
  background-color: var(--color-bg);
  border: 2px solid var(--color-text);
  box-shadow: 8px 8px 0 0 var(--color-accent);
}

.pricing-pro__rate-label {
  margin: 0;
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text);
}

.pricing-pro__rate-price {
  margin: 4px 0 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 64px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-accent);
}

.pricing-pro__rate-unit {
  font-size: 24px;
  font-weight: var(--fw-medium);
}

.pricing-pro__rate-note {
  margin: 8px 0 0;
  font-size: 16px;
  font-style: italic;
  line-height: 24px;
  color: var(--color-text);
  opacity: 0.85;
}

.pricing-pro__rate-deduct {
  margin: 0;
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 22px;
  color: var(--color-accent);
}

/* === Responsive === */
@media (max-width: 1199px) {
  .pricing-pro {
    padding: 100px 50px;
  }

  .pricing-pro__cards {
    gap: 30px;
  }
}

@media (max-width: 767px) {
  .pricing-pro {
    padding: 60px 20px;
    gap: 40px;
  }

  .pricing-pro__heading {
    font-size: 32px;
    line-height: 48px;
    text-align: left;
    padding: 10px 20px;
  }

  .pricing-pro__intro {
    text-align: left;
    font-size: 16px;
    line-height: 24px;
    padding: 0 20px;
  }

  .pricing-pro__cards {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .pricing-pro-card {
    padding: 30px 20px;
  }

  .pricing-pro-card__number {
    font-size: 48px;
  }

  .pricing-pro__rate {
    padding: 30px 20px;
  }

  .pricing-pro__rate-price {
    font-size: 48px;
  }
}

/* === Reveal au scroll === */
@keyframes pricing-pro-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pricing-pro-slide-from-right {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.js .pricing-pro__heading[data-reveal],
.js .pricing-pro__intro[data-reveal],
.js .pricing-pro__cards[data-reveal] .pricing-pro-card,
.js .pricing-pro__rate[data-reveal] {
  opacity: 0;
}

.pricing-pro__heading.is-visible,
.pricing-pro__intro.is-visible,
.pricing-pro__rate.is-visible {
  animation: pricing-pro-slide-up 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.pricing-pro__cards.is-visible .pricing-pro-card {
  animation: pricing-pro-slide-from-right 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.pricing-pro__cards.is-visible .pricing-pro-card:nth-child(1) { animation-delay:   0ms; }
.pricing-pro__cards.is-visible .pricing-pro-card:nth-child(2) { animation-delay: 100ms; }
.pricing-pro__cards.is-visible .pricing-pro-card:nth-child(3) { animation-delay: 200ms; }
.pricing-pro__cards.is-visible .pricing-pro-card:nth-child(4) { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .js .pricing-pro__heading[data-reveal],
  .js .pricing-pro__intro[data-reveal],
  .js .pricing-pro__cards[data-reveal] .pricing-pro-card,
  .js .pricing-pro__rate[data-reveal] {
    opacity: 1;
    animation: none;
  }
}