/* Page Tarifs — cartes d'offres (abonnement + packs), design app.css. */
/* Conteneur un peu plus large : les deux cartes respirent horizontalement. */
.wrap--pricing{ --maxw:900px; }
body:has(.wrap--pricing) .appbar{ --maxw:900px; }
.pricing-hero{ text-align:center; max-width:640px; margin:0 auto clamp(30px,5vw,48px); }
.pricing-hero .kicker{ justify-content:center; }
.pricing-hero h1{ font-size:clamp(2rem,1.4rem + 2.6vw,3rem); line-height:1.06; margin:.2rem 0 1rem; }
.pricing-hero p{ color:var(--text-dim); font-size:1.06rem; }

.plans{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,26px); align-items:stretch; }
@media (max-width:820px){ .plans{ grid-template-columns:1fr; } }

.plan{ position:relative; display:flex; flex-direction:column; padding:clamp(26px,3.4vw,38px);
  border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(180deg,var(--panel),rgba(14,19,34,.6));
  box-shadow:var(--shadow-card); }
.plan--featured{ border:1px solid var(--line-3);
  background:radial-gradient(130% 80% at 50% -10%,rgba(231,201,140,.12),transparent 60%),linear-gradient(180deg,var(--panel-2),var(--panel));
  box-shadow:var(--shadow), var(--glow); }
.plan__ribbon{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:6px;
  padding:6px 16px; border-radius:var(--r-pill); font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#1a1407; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); box-shadow:0 10px 24px -10px rgba(205,162,95,.7); white-space:nowrap; }
.plan__ribbon svg{ width:13px; height:13px; fill:currentColor; stroke:none; }
.plan__name{ font-family:var(--serif); font-size:1.5rem; color:var(--cream); margin:0 0 4px; }
.plan__tagline{ color:var(--text-dim); font-size:.92rem; margin:0 0 20px; }
.plan__price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 4px; }
.plan__price-new{ font-family:var(--serif); font-size:2.8rem; line-height:1; color:var(--gold-bright); }
.plan__price-per{ color:var(--text-dim); font-size:.9rem; }
.plan__price-old{ position:relative; color:var(--text-mute); font-size:1.05rem; }
.plan__price-old::after{ content:""; position:absolute; left:-2px; right:-2px; top:52%; height:2px; background:var(--err); transform:rotate(-7deg); opacity:.75; }
.plan__discount{ align-self:flex-start; display:inline-flex; align-items:center; padding:3px 10px; border-radius:var(--r-pill); background:rgba(205,162,95,.16);
  color:var(--gold-bright); font-size:.72rem; font-weight:600; letter-spacing:.04em; margin:0 0 18px; }
.plan__feats{ list-style:none; padding:0; margin:0 0 24px; display:grid; gap:12px; flex:1; }
.plan__feats li{ display:flex; gap:11px; align-items:flex-start; font-size:.95rem; line-height:1.45; color:var(--text); }
.plan__feats li svg{ width:19px; height:19px; color:var(--gold); flex:0 0 auto; margin-top:1px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.plan__feats li strong{ color:var(--cream); }
.plan__feats li.is-off{ color:var(--text-mute); }
.plan__feats li.is-off svg{ color:var(--text-mute); }
.plan__note{ margin:14px 0 0; text-align:center; font-size:.8rem; color:var(--text-mute); display:flex; align-items:center; justify-content:center; gap:7px; }
.plan__note svg{ width:14px; height:14px; color:var(--gold); flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* Packs de crédits (colonne à l'unité) */
.packs{ display:grid; gap:12px; margin:0 0 8px; }
.pack{ position:relative; display:flex; align-items:center; gap:16px; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r);
  background:rgba(8,12,22,.45); text-align:left; cursor:pointer; transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease); }
.pack:hover{ border-color:var(--line-2); background:rgba(19,26,44,.55); transform:translateY(-2px); }
/* Toute la ligne est cliquable : un bouton de soumission transparent recouvre le pack. */
.pack__hit{ position:absolute; inset:0; z-index:2; border:0; margin:0; padding:0; background:transparent;
  cursor:pointer; border-radius:inherit; -webkit-appearance:none; appearance:none; font:inherit; }
.pack__hit:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.pack--pop{ border-color:var(--line-3); background:rgba(205,162,95,.08); }
.pack__qty{ font-family:var(--serif); font-size:1.55rem; color:var(--cream); line-height:1; flex:0 0 auto; min-width:24px; text-align:center; }
.pack__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pack__label{ display:flex; align-items:center; flex-wrap:wrap; gap:5px 8px; color:var(--cream); font-size:.95rem; }
.pack__per{ display:block; color:var(--text-mute); font-size:.8rem; white-space:nowrap; }
/* Prix : pastille non-cliquable (le pack entier est le bouton), réagit au hover du pack. */
.pack__price{ font-family:var(--serif); font-size:1.2rem; color:var(--gold-bright); flex:0 0 auto; white-space:nowrap;
  padding:9px 15px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:rgba(205,162,95,.04);
  transition:border-color .3s var(--ease),background-color .3s var(--ease); }
.pack:hover .pack__price{ border-color:var(--line-3); background:rgba(205,162,95,.1); }
.pack__price-old{ text-decoration:line-through; color:var(--text-mute); font-size:.82rem; margin-right:2px; opacity:.75; }
.pack__tag{ display:inline-block; padding:2px 8px; border-radius:var(--r-pill); font-size:.62rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:rgba(205,162,95,.16); color:var(--gold-bright); white-space:nowrap; }

/* CTA principal de la carte : jamais sur deux lignes, resserré pour tenir. */
.plan form{ margin-top:auto; }
.plan .btn--block{ white-space:nowrap; }
.plan .btn--lg{ --px:22px; letter-spacing:.1em; }

.pricing-foot{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin:30px auto 0; color:var(--text-mute); font-size:.82rem; text-align:center; }
.pricing-foot svg{ width:15px; height:15px; color:var(--gold); flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }