/* Pages Tarifs / Pricing : la charte Lumographe appliquée aux composants de commerce.css
   (fenêtre de connexion, parrainage, champs). Chargée après commerce.css et lumographe-home.css. */
.page-tarifs { --ink: #e9edf3; --muted: #9aa4b4; --line: #2e3648; --panel: #151924; --panel-strong: #1d2230; --blue: #5d83c4; --blue-soft: #9bb6e4; --cyan: #9bb6e4; --success: #4ec88f; --danger: #e0676b; --radius: 12px; --shadow: 0 24px 60px rgba(0, 0, 0, .45); font-family: var(--texte); background: var(--nuit); }
.tarifs-heros { max-width: 52rem; }
.tarifs-heros h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.03em; }
.etapes-precommande { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.etapes-precommande li { padding: 22px; border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--surface); }
.etapes-precommande .mono { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(93, 131, 196, .75); border-radius: 8px; background: rgba(93, 131, 196, .1); color: var(--neon-clair); letter-spacing: 0; }
.etapes-precommande h3 { margin-top: 14px; font-size: 1.2rem; }
.etapes-precommande p { margin-top: 8px; color: var(--gris); }
.offre.bientot { opacity: .78; }
.bouton.inactif { border-style: dashed; background: transparent; color: var(--gris); cursor: default; }
button.bouton { font: inherit; font-weight: 700; cursor: pointer; }
button.bouton[disabled] { opacity: .5; cursor: progress; }
.page-tarifs .feedback { margin-top: 16px; color: var(--gris); }
.page-tarifs .feedback[data-tone="error"] { color: var(--rouge); }
.page-tarifs .feedback[data-tone="success"] { color: var(--ok); }

/* Parrainage */
.page-tarifs .referral-card { margin-top: 28px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--surface); box-shadow: none; }
.page-tarifs .referral-card h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.page-tarifs .eyebrow { color: var(--neon-clair); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.page-tarifs .eyebrow::before { display: none; }
.page-tarifs .referral-benefits p { border-radius: 8px; background: var(--ardoise); border: 1px solid var(--trait-fort); }

/* Boutons de commerce.css (connexion, parrainage) au gabarit des pastilles de l'app */
.page-tarifs .button { min-height: 44px; padding: 0 16px; border-radius: 8px; font-weight: 700; box-shadow: none; transform: none; }
.page-tarifs .button-primary { background: var(--neon); border: 1px solid var(--neon); color: #fff; }
.page-tarifs .button-primary:hover { background: var(--neon-fort); border-color: var(--neon-fort); }
.page-tarifs .button-secondary, .page-tarifs .button-tertiary { background: rgba(93, 131, 196, .1); border: 1px solid rgba(93, 131, 196, .35); color: var(--neon-clair); }
.page-tarifs .button-secondary:hover, .page-tarifs .button-tertiary:hover { background: rgba(93, 131, 196, .22); border-color: rgba(93, 131, 196, .75); }

/* Champs et fenêtre de connexion */
.page-tarifs .field label { color: var(--gris); font-weight: 600; font-size: .85rem; }
.page-tarifs .field input { min-height: 44px; border-radius: 8px; border: 1px solid var(--trait-fort); background: var(--surface3); color: var(--papier); }
.page-tarifs .field input:focus { outline: 2px solid var(--neon-clair); outline-offset: 1px; border-color: var(--neon); }
.page-tarifs dialog { border: 1px solid var(--trait-fort); border-radius: 16px; background: var(--nuit-2); color: var(--papier); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.page-tarifs dialog::backdrop { background: rgba(4, 6, 10, .78); }
.page-tarifs .icon-button { border-radius: 8px; border: 1px solid var(--trait-fort); background: var(--ardoise); color: var(--papier); }
.page-tarifs .auth-links button { color: var(--neon-clair); }

@media (max-width: 1080px) { .etapes-precommande { grid-template-columns: 1fr; } }