/* ══════════════════════════════════════════════════════════════
   AZUROTEC — tarifs et preuve
   Chargée en dernier. Deux sections restées en retard sur le reste :

   · Les tarifs alignaient trois cartes identiques. Le pack Signature
     portait une étiquette « Populaire » sans dominer visuellement rien —
     or c'est la carte qui décide de la vente.
   · La preuve posait trois chiffres à plat et traitait le témoignage
     comme du texte courant. Pour un studio qui vend de la valorisation
     visuelle, c'était la section la plus contradictoire de la page.

   Contrainte héritée : app.js anime .stat et .pricing-card en opacity et
   transform. Rien ici ne touche à ces deux propriétés hors :hover — le
   compteur ne modifie que du texte.
   ══════════════════════════════════════════════════════════════ */

/* ═══ 1. Tarifs — une carte domine ═════════════════════════ */

.pricing-grid { align-items: stretch; }

.pricing-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 2.6vw, 2.75rem) !important;
}

/* Le prix devient l'information principale, pas une ligne parmi d'autres. */
.pricing-price {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1;
  margin-block: var(--space-md) var(--space-lg);
  color: var(--color-burgundy);
}
.pricing-desc {
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}
[lang="ar"] .pricing-desc { letter-spacing: 0; text-transform: none; }

/* Les avantages se lisent comme une liste cochée, pas comme un tableau. */
.pricing-features { flex: 1 1 auto; margin-block: 0 var(--space-xl); }
.pricing-features li {
  position: relative;
  padding-inline-start: 1.6rem;
  padding-block: .45rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 9%, transparent);
  line-height: var(--leading-snug);
}
.pricing-features li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .95em;
  width: .55rem;
  height: .3rem;
  border-inline-start: 1.5px solid var(--color-gold-ink);
  border-bottom: 1.5px solid var(--color-gold-ink);
  transform: rotate(-45deg);
}
[dir="rtl"] .pricing-features li::before { transform: rotate(-45deg) scaleX(-1); }

/* La carte Signature prend le dessus : elle monte, s'encadre de laiton et
   creuse son ombre. C'est la seule hiérarchie qui compte ici. */
@media (min-width: 900px) {
  .pricing-featured {
    /* premium.css:1194 impose height:100% et la grille étire toutes les
       cartes à la même hauteur : la marge négative n'avait aucun effet.
       En hauteur automatique, l'étirement remplit la cellule ET les
       marges négatives débordent au-delà — la carte dépasse enfin. */
    height: auto !important;
    align-self: stretch;
    margin-block: calc(-1 * var(--space-xl));
    padding-block: clamp(2.75rem, 4vw, 4rem) !important;
    z-index: 2;
  }
}
.pricing-featured {
  position: relative;
  border: 1px solid var(--color-gold) !important;
  box-shadow: 0 40px 90px -40px rgba(23, 35, 59, .5) !important;
}
/* Un filet de laiton en tête, comme un ruban de sélection. */
.pricing-featured::after {
  content: "";
  position: absolute;
  inset-inline: -1px;
  top: -1px;
  height: 3px;
  background: var(--color-gold);
}

.pricing-badge {
  display: inline-block;
  margin-bottom: var(--space-md);
  padding: .3rem .8rem;
  background: var(--color-gold);
  color: var(--color-burgundy);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
}
[lang="ar"] .pricing-badge { letter-spacing: 0; text-transform: none; }

.pricing-card .btn { width: 100%; justify-content: center; margin-top: auto; }

/* ═══ 2. Preuve — les chiffres portent ═════════════════════ */

/* La section est en encre : filets et textes secondaires doivent rester
   clairs, sinon ils disparaissent. */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: clamp(2rem, 4vw, 3.5rem) !important;
}
.stat { display: flex; flex-direction: column; gap: .3rem; }

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6rem) !important;
  line-height: .95;
  letter-spacing: var(--track-display);
  color: var(--color-paper);
  font-variant-numeric: tabular-nums;
}
/* Le chiffre en cours de comptage ne doit pas faire sauter la mise en
   page à chaque incrément : la largeur est réservée. */
.stat-num[data-count] { min-width: 2.2ch; }

.stat-label {
  font-size: var(--text-2xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: rgba(243, 243, 236, .62);
}
[lang="ar"] .stat-label { letter-spacing: 0; text-transform: none; }

/* Le témoignage devient une citation détachée, avec un guillemet de
   laiton posé en marge plutôt qu'inséré dans le texte. */
.testimonial {
  position: relative;
  max-width: 26ch;
  margin-block: clamp(2.5rem, 5vw, 4.5rem) var(--space-sm) !important;
  padding-inline-start: clamp(2.5rem, 5vw, 4.5rem);
  font-size: clamp(1.6rem, 3.4vw, 2.9rem) !important;
  line-height: 1.22;
}
.testimonial::before {
  content: "\201C";
  position: absolute;
  inset-inline-start: 0;
  top: -.28em;
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 7.5rem);
  line-height: 1;
  color: var(--color-gold);
}
[dir="rtl"] .testimonial::before { content: "\201D"; }

.testimonial-source {
  padding-inline-start: clamp(2.5rem, 5vw, 4.5rem);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
}
[lang="ar"] .testimonial-source { letter-spacing: 0; text-transform: none; }

@media (max-width: 700px) {
  .stats-row { gap: var(--space-xl); }
  .testimonial, .testimonial-source { padding-inline-start: 2rem; }
}