/* pay.css — calculateur "Combien payez-vous pour l'IA ?" (/pay)
   100% tokens style.css existants, aucune nouvelle couleur. */

.pay-page { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.pay-hero { text-align: center; max-width: 560px; margin: 1.5rem auto 2rem; }
.pay-hero h1 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(1.7rem, 5vw, 2.4rem); color: var(--text); margin: 0 0 .6rem; }
.pay-hero p { color: var(--text-2); font-size: 1rem; margin: 0; }

.pay-layout { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 900px) {
  .pay-layout { flex-direction: row; align-items: flex-start; }
  .pay-list-col { flex: 1.6; min-width: 0; }
  .pay-summary-col { flex: 1; position: sticky; top: 90px; }
}

.pay-search { position: relative; margin-bottom: 1rem; }
.pay-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-2); }
.pay-search input { width: 100%; background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 12px; padding: .8rem 1rem .8rem 2.6rem; color: var(--text); font-size: .9rem; font-family: inherit; }
.pay-search input:focus { outline: none; border-color: var(--blue); }

.pay-tool-list { display: flex; flex-direction: column; gap: .6rem; max-height: 70vh; overflow-y: auto; padding-right: 2px; }
.pay-tool-row {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: var(--card); border: 2px solid var(--line); border-radius: 12px;
  padding: .7rem .9rem; transition: border-color .15s;
}
.pay-tool-row:has(.pay-tool-check:checked) { border-color: var(--blue); box-shadow: 3px 3px 0 var(--blue); }
.pay-tool-check { width: 20px; height: 20px; flex: none; accent-color: var(--blue); cursor: pointer; }
.pay-tool-logo { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; background: #fff; }
.pay-tool-info { flex: 1 1 auto; min-width: 0; }
.pay-tool-name { font-weight: 700; font-size: .9rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-tool-cat { font-size: .74rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pay-plan-select { flex: 1 1 100%; order: 5; margin-left: calc(20px + 34px + 1.4rem); background: var(--bg); border: 1.5px solid var(--line); border-radius: 8px; padding: .35rem .5rem; color: var(--text); font-size: .8rem; font-family: inherit; max-width: calc(100% - 20px - 34px - 1.4rem); }
.pay-tool-price { flex: none; font-weight: 700; font-size: .85rem; color: var(--text); min-width: 50px; text-align: right; }
.pay-tool-price.is-free { color: var(--green); }
@media (min-width: 560px) {
  .pay-plan-select { flex: none; order: 0; margin-left: 0; max-width: 150px; }
}
.pay-empty { text-align: center; color: var(--text-2); padding: 2rem 0; font-size: .9rem; }

.pay-summary-card { background: var(--card); border: 2px solid var(--text); box-shadow: var(--sh); border-radius: 18px; padding: 1.5rem; text-align: center; }
.pay-total-label { font-size: .8rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.pay-total-monthly { font-family: 'Bricolage Grotesque', sans-serif; font-size: 2.6rem; font-weight: 800; color: var(--text); margin: .3rem 0; }
.pay-total-monthly span { font-size: 1.1rem; color: var(--text-2); font-weight: 600; }
.pay-total-yearly { font-size: .85rem; color: var(--text-2); margin-bottom: .8rem; }
.pay-total-msg { font-size: .82rem; color: var(--text-2); margin: .6rem 0; min-height: 1.2em; }
.pay-share-btn { width: 100%; margin-top: .4rem; }
.pay-disclaimer { font-size: .72rem; color: var(--text-2); margin-top: .8rem; opacity: .8; }

.pay-alternatives { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.pay-alt-card { background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 14px; padding: .9rem 1rem; }
.pay-alt-card h3 { font-size: .82rem; color: var(--text); margin: 0 0 .5rem; }
.pay-alt-card h3 b { color: var(--yellow); }
.pay-alt-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem 0; border-top: 1px solid var(--line); }
.pay-alt-item:first-of-type { border-top: none; }
.pay-alt-item a { color: var(--blue); text-decoration: none; font-size: .82rem; font-weight: 600; }
.pay-alt-item span { font-size: .72rem; color: var(--green); }

.pay-canvas-wrap { margin: 2rem auto; max-width: 320px; }
.pay-canvas-wrap canvas { width: 100%; height: auto; border-radius: 16px; border: 2px solid var(--line); }

.pay-newsletter { max-width: 480px; margin: 3rem auto 0; text-align: center; background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 16px; padding: 1.5rem; }
.pay-newsletter h2 { font-size: 1.1rem; color: var(--text); margin: 0 0 .4rem; }
.pay-newsletter p { font-size: .85rem; color: var(--text-2); margin: 0 0 1rem; }

.aca-hidden { display: none !important; }