/* ================================================================
   pricing.css — Section "Tarifs"
   Figma node : 1281-3053
================================================================ */

/* ── Section ──────────────────────────────────────────────────── */
/* heading → .ch__* (character.css) */
.pricing {
  background:      var(--bg-hero);
  position:        relative;
  overflow:        hidden;
  --ch-accent:     #ffd793;            /* orange-100 — dots + em */
  --heading-color: var(--text-light);  /* blanc chaud fond sombre */
}

/* ── Grille des cartes ─────────────────────────────────────────── */
.pricing__grid {
  display:   flex;
  gap:       var(--space-4);
  max-width: 1264px;
  margin:    0 auto;
}

/* ── Carte individuelle ────────────────────────────────────────── */
.pricing-card {
  flex:           1;
  display:        flex;
  flex-direction: column;
  min-width:      0;
}

/* ── Structure bevel pixel-art ─────────────────────────────────── */
/* Chaque "row" est un flex horizontal à 5 bandes de 4px            */
.pc-row {
  display: flex;
  width:   100%;
}

/* Bandes latérales de 4px */
.pc-xleft,
.pc-xright,
.pc-left,
.pc-right {
  flex-shrink: 0;
  width:       4px;
}

/* Zone de contenu centrale */
.pc-inner {
  flex:      1;
  min-width: 0;
}

/* ── Row supérieure — fond blanc, bord noir ────────────────────── */
.pc-row--top .pc-xleft,
.pc-row--top .pc-xright {
  background: #1a0f26;
  display:    flex;
  flex-direction: column;
  justify-content: flex-start;
}

.pc-row--top .pc-xleft::before,
.pc-row--top .pc-xright::before {
  content:    '';
  display:    block;
  height:     8px;         /* encoche coin supérieur */
  background: transparent;
}

/* Remplissage blanc dans xleft/xright après l'encoche */
.pc-row--top .pc-xleft,
.pc-row--top .pc-xright {
  background: transparent;
  position:   relative;
}

.pc-row--top .pc-left,
.pc-row--top .pc-right,
.pc-row--top .pc-inner {
  background: #fff;
}

/* Encoche pixel : le xleft/xright sont noirs avec un gap transparent en haut */
.pc-row--top {
  position: relative;
}

/* ── Row du bas — fond blanc, bord noir ────────────────────────── */
.pc-row--bottom .pc-xleft,
.pc-row--bottom .pc-xright {
  background: transparent;
}

.pc-row--bottom .pc-left,
.pc-row--bottom .pc-right,
.pc-row--bottom .pc-inner {
  background: #fff;
}


/* Suppression des pseudo-classes trop complexes : approche simplifiée */
.pc-row--top .pc-xleft,
.pc-row--top .pc-xright,
.pc-row--bottom .pc-xleft,
.pc-row--bottom .pc-xright {
  background: #fff;
  width:      4px;
}

/* Coin chamfré haut : xleft/xright du top reculent de 8px */
.pc-row--top .pc-xleft,
.pc-row--top .pc-xright {
  padding-top: 8px;
  background:  transparent; /* zone invisible = laisse le fond section apparaître */
}

/* Coin chamfré haut — left/right reculent de 4px */
.pc-row--top .pc-left,
.pc-row--top .pc-right {
  padding-top: 4px;
  background:  transparent;
}

/* Coin chamfré bas */
.pc-row--bottom .pc-xleft,
.pc-row--bottom .pc-xright {
  padding-bottom: 8px;
  background:     transparent;
}

.pc-row--bottom .pc-left,
.pc-row--bottom .pc-right {
  padding-bottom: 4px;
  background:     transparent;
}

/* Sur top/bottom, le remplissage blanc vient du .pc-left > inner */
.pc-row--top .pc-left > *,
.pc-row--top .pc-right > * {
  background: #fff;
  flex: 1;
}

/* Approche finale propre — strips flex */
.pc-row--top .pc-xleft,
.pc-row--top .pc-xright {
  display:         flex;
  flex-direction:  column;
  padding-top:     0;
  background:      transparent;
  overflow:        hidden;
}

.pc-row--top .pc-xleft::after,
.pc-row--top .pc-xright::after {
  content:    '';
  display:    block;
  flex:       1;
  background: #fff;
  margin-top: 8px; /* encoche coin */
}

.pc-row--top .pc-left,
.pc-row--top .pc-right {
  display:        flex;
  flex-direction: column;
  padding-top:    0;
  background:     transparent;
}

.pc-row--top .pc-left::after,
.pc-row--top .pc-right::after {
  content:    '';
  display:    block;
  flex:       1;
  background: #fff;
  margin-top: 4px;
}

.pc-row--bottom .pc-xleft,
.pc-row--bottom .pc-xright {
  display:         flex;
  flex-direction:  column;
  background:      transparent;
}

.pc-row--bottom .pc-xleft::before,
.pc-row--bottom .pc-xright::before {
  content:       '';
  display:       block;
  flex:          1;
  background:    #fff;
  margin-bottom: 8px;
}

.pc-row--bottom .pc-left,
.pc-row--bottom .pc-right {
  display:        flex;
  flex-direction: column;
  background:     transparent;
}

.pc-row--bottom .pc-left::before,
.pc-row--bottom .pc-right::before {
  content:       '';
  display:       block;
  flex:          1;
  background:    #fff;
  margin-bottom: 4px;
}

/* ── Freedom — bande "aucun engagement" ────────────────────────── */
/* Couleurs par variante (tokens Figma) */
.pricing-card--starter { --pc-fb: #d4c2ff; --pc-ft: #1a0f26; } /* purple-100 / purple-900 */
.pricing-card--super   { --pc-fb: #ffd793; --pc-ft: #342312; } /* orange-100 / orange-900 */
.pricing-card--ultra   { --pc-fb: #c2e4ff; --pc-ft: #152336; } /* cyan-100   / cyan-900   */

.pc-freedom {
  display:     flex;
  align-items: stretch;
  width:       100%;
  background:  #fff;
}

/* Bordure latérale 4px avec gap transparent 4px haut & bas */
.pc-freedom__bd {
  width:       4px;
  flex-shrink: 0;
  background: linear-gradient(
    to bottom,
    transparent 0px   4px,
    var(--pc-fb) 4px  calc(100% - 4px),
    transparent  calc(100% - 4px) 100%
  );
}

.pc-freedom__inner {
  flex:        1;
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     16px 8px;
  background:  var(--pc-fb);
}

.pc-freedom__icon {
  width:       24px;
  height:      24px;
  flex-shrink: 0;
}

.pc-freedom__text {
  flex:        1;
  font-family: var(--font-body);
  font-size:   12px;
  font-weight: var(--fw-regular);
  line-height: 1.4;
  color:       var(--pc-ft);
}

/* ── Contenu top (étoiles + tag + prix + description + CTA) ────── */
.pc-top-content {
  padding:        var(--space-2) var(--space-1);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  background:     #fff;
}

/* ── Étoiles ────────────────────────────────────────────────────── */
.pc-stars {
  display:     flex;
  gap:         6px;
  align-items: center;
}

.pc-star {
  display:         block;
  flex-shrink:     0;
  width:           20px;
  height:          20px;
  image-rendering: pixelated;
}

/* ── Tag badge ──────────────────────────────────────────────────── */
.pc-tag {
  display:     inline-flex;
  align-items: stretch;
  height:      24px;
  align-self:  flex-start;
}

.pc-tag__left,
.pc-tag__right {
  flex-shrink: 0;
  width:       2px;
}

.pc-tag__center {
  flex:           1;
  display:        flex;
  align-items:    center;
  padding:        0 4px;
  font-family:    var(--font-heading);
  font-size:      var(--text-sm);
  line-height:    1;
  text-transform: uppercase;
  letter-spacing: 1.12px;
  white-space:    nowrap;
}

.pc-tag--starter .pc-tag__left,
.pc-tag--starter .pc-tag__right,
.pc-tag--starter .pc-tag__center {
  background: #d4c2ff;
  color:      #1a0f26;
}

.pc-tag--super .pc-tag__left,
.pc-tag--super .pc-tag__right,
.pc-tag--super .pc-tag__center {
  background: #ffd793;
  color:      #342312;
}

.pc-tag--ultra .pc-tag__left,
.pc-tag--ultra .pc-tag__right,
.pc-tag--ultra .pc-tag__center {
  background: #c2e4ff;
  color:      #152336;
}

/* ── Prix ───────────────────────────────────────────────────────── */
.pc-price {
  display:     flex;
  align-items: baseline;
  gap:         0;
  flex-wrap:   wrap;
}

.pc-price__amount {
  font-family:    var(--font-heading);
  font-size:      var(--text-h2);
  line-height:    var(--lh-heading);
  letter-spacing: 1.92px;
  color:          #0d111c;
}

.pc-price__suffix {
  font-family: var(--font-heading);
  font-size:   var(--text-lg);
  font-weight: var(--fw-regular);
  line-height: 1;
  color:       #0d111c;
}

/* ── Description ────────────────────────────────────────────────── */
.pc-desc {
  font-family: var(--font-body);
  font-size:   var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color:       var(--neutral-300);
}

/* .pc-band-content / .pc-lock / .pc-band-text → remplacés par .pc-freedom* */

/* ── Contenu bas (features) ────────────────────────────────────── */
.pc-bottom-content {
  padding:        var(--space-2) var(--space-1);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  flex:           1;
  background:     #fff;
}

/* ── Ligne feature ──────────────────────────────────────────────── */
.pc-feature {
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
}

.pc-feature__icon {
  width:       24px;
  height:      24px;
  flex-shrink: 0;
}

.pc-feature__text {
  font-family: var(--font-body);
  font-size:   12px;
  font-weight: var(--fw-regular);
  line-height: 1.4;
  color:       #1a0f26;
}

.pc-feature__text strong {
  font-weight: var(--fw-bold);
}

/* ── PsyKo character ────────────────────────────────────────────── */
.pricing__psyko {
  position:   absolute;
  bottom:     0;
  left:       50%;
  margin-left: -430px;
  width:      256px;
  height:     256px;

  transform:  translateY(100%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing__psyko.is-visible {
  transform: translateY(0);
}

.pricing__psyko img {
  width:           100%;
  height:          100%;
  object-fit:      contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ── Responsive — Tablette ≤ 1024px ────────────────────────────── */
@media (max-width: 1024px) {
  .pricing {
    padding: var(--space-8) var(--space-6);
  }

  .pricing__grid {
    flex-wrap: wrap;
  }

  .pricing-card {
    flex:      1 1 calc(50% - var(--space-2));
    min-width: 280px;
  }

  .pricing__psyko {
    left:   var(--space-6);
    width:  180px;
    height: 180px;
  }
}

/* ── Responsive — Mobile ≤ 768px ───────────────────────────────── */
@media (max-width: 768px) {
  .pricing {
    padding: var(--space-8) var(--space-4);
  }

  .pricing__grid {
    flex-direction: column;
  }

  .pricing-card {
    flex:  none;
    width: 100%;
  }

  .pricing__psyko {
    position:  relative;
    bottom:    auto;
    right:     auto;
    margin:    var(--space-4) auto 0;
    transform: translateY(0);
    width:     160px;
    height:    160px;
  }
}