/* Cartes et statistiques — transcription des deux écrans du handoff V3. */
.loyalty-screen { background: var(--cream); min-height: 0; }
.loyalty-screen > .screen__header { border: 0; background: var(--cream); padding: 12px 18px 7px; }
.loyalty-screen .screen__title { font-size: 22px; }
.loyalty-screen__body { flex: 1; min-height: 0; overflow-y: auto; background: var(--cream); padding: 8px 14px 20px; -webkit-overflow-scrolling: touch; }
.loyalty-tabs { display: flex; gap: 8px; padding: 4px 14px 8px; background: var(--cream); }
.loyalty-tab { min-height: 38px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; background: var(--paper); color: var(--ink-2); font: 600 12px var(--font-body); cursor: pointer; }
.loyalty-tab--active { background: var(--sage-deep); color: #fff; border-color: var(--sage-deep); }
.loyalty-carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; margin: 0 -14px; padding: 4px 42px 13px 42px; -webkit-overflow-scrolling: touch; }
.loyalty-carousel::-webkit-scrollbar { display: none; }
.loyalty-card { position: relative; flex: 0 0 min(81vw, 294px); min-height: 180px; scroll-snap-align: center; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; border-radius: 18px; box-shadow: var(--shadow-card); color: #fff; overflow: hidden; }
.loyalty-card::before { content: ''; position: absolute; right: -21px; top: -49px; width: 185px; height: 185px; border: 22px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; }
.loyalty-card--blue { background: linear-gradient(135deg,#004e9f,#003d7c); }
.loyalty-card--gold { background: linear-gradient(135deg,#c8a500,#966e00); }
.loyalty-card--sky { background: linear-gradient(135deg,#4b9bbc,#336596); }
.loyalty-card__brand { position: relative; max-width: calc(100% - 37px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.loyalty-card__delete { position: absolute; z-index: 1; top: 9px; right: 10px; min-width: 34px; min-height: 34px; border: 0; border-radius: 8px; background: rgba(255,255,255,.2); color: #fff; font-size: 20px; cursor: pointer; }
.loyalty-card__barcode { position: relative; margin: auto 0 12px; text-align: center; }
.loyalty-card__scan { display: block; width: 100%; max-width: 100%; padding: 0; border: 0; border-radius: 4px; background: #fff; overflow: hidden; cursor: pointer; }
.loyalty-card__scan > span { display: block; width: 100%; overflow: hidden; }
.loyalty-card__scan svg { display: block; width: 100%; height: 44px; }
.loyalty-card__number { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 5px; font: 12px ui-monospace,monospace; letter-spacing: .06em; }
.loyalty-card__footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 700; }
.loyalty-card__footer button { border: 0; padding: 5px 0 5px 5px; background: none; color: inherit; font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; }
.loyalty-card__urgent { position: relative; font-size: 10px; margin-top: 3px; }
.loyalty-add { display: block; margin: 3px auto 16px; min-height: 40px; padding: 7px 16px; background: var(--paper); border: 1px solid var(--sage); border-radius: 12px; color: var(--sage-deep); font: 700 13px var(--font-body); cursor: pointer; }
.loyalty-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 2px 8px; }
.loyalty-section-heading h2 { font: 600 18px var(--font-display); color: var(--sage-deep); }
.loyalty-section-heading button { border: 0; background: none; color: var(--sage-deep); font: 600 11px var(--font-body); cursor: pointer; }
.loyalty-coupons { background: var(--paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.loyalty-coupon { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
.loyalty-coupon:first-child { border-top: 0; }
.loyalty-coupon__icon { flex: 0 0 25px; font-size: 18px; }
.loyalty-coupon__content { flex: 1; min-width: 0; }
.loyalty-coupon__store { color: var(--ink-3); font-size: 11px; margin-top: 2px; }
.loyalty-coupon__delete { flex: 0 0 30px; min-height: 36px; border: 0; background: none; color: var(--coral-deep); font-size: 20px; cursor: pointer; }
.loyalty-empty { text-align: center; padding: 30px 16px; color: var(--ink-2); }
.loyalty-empty--small { padding: 19px; background: var(--paper); border-radius: var(--radius-card); font-size: 13px; }
.loyalty-gmail { width: 100%; min-height: 48px; margin-top: 18px; background: var(--paper); border: 1.5px solid var(--sage); border-radius: 14px; color: var(--sage-deep); font: 700 14px var(--font-body); cursor: pointer; }
.loyalty-gmail:disabled { opacity: .6; }
.loyalty-gmail-help { color: var(--ink-3); font-size: 11.5px; text-align: center; margin: 7px 0 0; }
.loyalty-error { color: var(--coral-deep); font-size: 12px; margin-top: 8px; }

.stats-impact { display: flex; flex-direction: column; gap: 13px; padding-bottom: 14px; }
.stats-impact__heading { margin: 0 4px 1px; }
.stats-impact__heading h2 { color: var(--sage-deep); font: 600 22px var(--font-display); }
.stats-impact__heading p { color: var(--ink-2); font-size: 13px; margin-top: 3px; }
.stats-impact__hero { border-radius: 20px; background: #e8ecfb; text-align: center; padding: 18px 15px; }
.stats-impact__hero-label { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.stats-impact__hero-value { margin: 4px 0; color: var(--coral-deep); font: 600 46px/1.1 var(--font-display); }
.stats-impact__hero-empty { margin: 12px 0; color: var(--ink); font-size: 14px; }
.stats-impact__hero-comparison { color: var(--ink-2); font-size: 12.5px; }
.stats-impact__co2 { color: var(--parve-fg); font-size: 11.5px; font-weight: 600; margin-top: 7px; }
.stats-impact__nutri,.stats-impact__waste,.stats-impact__history,.stats-empty { background: var(--paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 15px; }
.stats-impact__nutri { display: flex; align-items: center; gap: 15px; }
.stats-impact__nutri-ring { display: grid; place-items: center; flex: 0 0 74px; height: 74px; border: 9px solid var(--nutri-color); border-radius: 50%; color: var(--nutri-color); }
.stats-impact__nutri-ring span { font: 600 26px var(--font-display); }
.stats-impact__nutri h3,.stats-impact__waste h3,.stats-impact__history h3 { color: var(--ink); font-size: 14px; font-weight: 600; }
.stats-impact__nutri p { color: var(--ink-2); font-size: 12.5px; margin-top: 4px; }
.stats-impact__waste h3 { margin-bottom: 12px; }
.stats-impact__waste-empty,.stats-empty { color: var(--ink-2); font-size: 12px; }
.stats-impact__bars { display: flex; gap: 8px; align-items: flex-end; min-height: 95px; }
.stats-impact__day { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.stats-impact__bar-track { display: flex; align-items: flex-end; justify-content: center; height: 78px; width: 100%; }
.stats-impact__bar { display: block; width: min(23px, 85%); border-radius: 6px 6px 0 0; background: var(--sage); }
.stats-impact__bar--max { background: var(--coral); }
.stats-impact__day-label { color: var(--ink-3); font-size: 10px; }
.stats-impact__waste-total { color: var(--ink-3); font-size: 11px; margin-top: 10px; }
.stats-impact__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.stats-impact__badge { padding: 7px 11px; border-radius: 999px; color: var(--parve-fg); background: var(--parve-bg); font-size: 11.5px; font-weight: 600; }
.stats-impact__history h3 { margin-bottom: 12px; }
.savings-chart { display: flex; flex-direction: column; gap: 7px; }
.savings-row { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 10px; }
.savings-row__label { flex: 0 0 55px; }
.savings-row__bar-track { flex: 1; height: 8px; overflow: hidden; border-radius: 5px; background: var(--cream); }
.savings-row__bar { height: 100%; border-radius: inherit; background: var(--sage); }
.savings-row__value { flex: 0 0 50px; text-align: right; }