.loyalty-web-page { --orange:#f2790a; min-height: 100vh; background: radial-gradient(circle at 20% 10%, rgba(242,177,52,0.09), transparent 34%), var(--black); }
.loyalty-web-header { position: fixed; }
.loyalty-back-link { padding: 9px 17px; }
.loyalty-web-main { min-height: 100vh; padding: 145px 0 80px; }
.loyalty-web-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.loyalty-web-heading h1, .loyalty-guest h1 { font-size: clamp(3rem, 8vw, 5.5rem); }
.loyalty-web-heading > div > p:last-child, .loyalty-guest-card > p { color: var(--cream-dim); }
.loyalty-logout, .loyalty-refresh { border: 0; background: transparent; color: var(--cream-dim); cursor: pointer; font: 700 0.85rem var(--font-body); }
.loyalty-logout:hover, .loyalty-refresh:hover { color: var(--gold); }
.loyalty-web-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr); gap: 28px; align-items: start; }
.loyalty-panel { border: 1px solid rgba(248,239,221,0.1); border-radius: 20px; background: var(--black-soft); padding: 26px; }
.loyalty-member-card {
  --loyalty-card-start: #211b14; --loyalty-card-end: #2a231a; --loyalty-card-text: #f8efdd; --loyalty-card-accent: #f2b134;
  position: relative; min-height: 330px; overflow: hidden; margin-bottom: 28px; border-radius: 26px;
  color: var(--loyalty-card-text); background: linear-gradient(135deg, var(--loyalty-card-start), var(--loyalty-card-end));
  box-shadow: 0 32px 70px rgba(0,0,0,0.36); isolation: isolate;
}
.loyalty-member-card.has-image { background-size: cover; background-position: center; }
.loyalty-member-card-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(0,0,0,0.12), rgba(0,0,0,0.48)); }
.loyalty-member-card-content { min-height: 330px; display: flex; flex-direction: column; padding: 30px; }
.loyalty-card-topline, .loyalty-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 800; letter-spacing: 1px; }
.loyalty-card-topline span:last-child { color: var(--loyalty-card-accent); font-size: 0.78rem; }
.loyalty-card-points { display: flex; align-items: baseline; gap: 10px; margin: auto 0 12px; }
.loyalty-card-points strong { color: var(--loyalty-card-accent); font: 5.4rem/0.85 var(--font-display); }
.loyalty-card-points span { font-weight: 700; }
.loyalty-progress { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.18); }
.loyalty-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--loyalty-card-accent); transition: width 0.35s ease; }
.loyalty-member-card-content > p { margin: 8px 0 24px; font-size: 0.82rem; opacity: 0.82; }
.loyalty-card-bottom { padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.82rem; }
.loyalty-code-panel h2, .loyalty-history-panel h2 { font-size: 2.2rem; margin-bottom: 8px; }
.loyalty-rewards-panel {
  position: relative; margin-bottom: 28px; overflow: hidden; padding: 24px;
  border-color: rgba(242,121,10,.45);
  background:
    radial-gradient(circle at 82% 11%, rgba(242,121,10,.18), transparent 24%),
    linear-gradient(145deg, #171411, #070808 68%);
  box-shadow: 0 28px 64px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.025);
}
.loyalty-rewards-panel::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.22;
  background-image: repeating-linear-gradient(135deg, transparent 0 15px, rgba(242,177,52,.07) 16px 17px);
  mask-image: linear-gradient(to bottom, #000, transparent 40%);
}
.loyalty-rewards-panel > * { position:relative; z-index:1; }
.loyalty-rewards-panel.is-disabled .loyalty-pass-summary,
.loyalty-rewards-panel.is-empty .loyalty-pass-summary { display:none; }
.loyalty-rewards-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.loyalty-rewards-heading h2 { margin:0; color:var(--cream); font-size:2.4rem; }
.loyalty-rewards-status { padding:7px 10px; border:1px solid rgba(242,177,52,.35); border-radius:999px; color:var(--gold); background:rgba(242,177,52,.08); font-size:.7rem; font-weight:900; text-align:right; }
.loyalty-pass-summary {
  display:grid; grid-template-columns:minmax(0,1fr) 112px; gap:20px; align-items:center; margin-bottom:18px; padding:22px;
  border:1px solid rgba(242,177,52,.58); border-radius:21px;
  background:linear-gradient(130deg, rgba(42,35,26,.94), rgba(242,121,10,.13), rgba(12,11,9,.96));
  box-shadow:0 0 28px rgba(242,121,10,.11);
}
.loyalty-pass-copy > span { display:block; color:var(--gold); font-size:.72rem; font-weight:900; letter-spacing:.8px; }
.loyalty-pass-copy > strong { display:block; margin:5px 0 13px; color:var(--cream); font:3rem/.95 var(--font-display); letter-spacing:.5px; }
.loyalty-pass-copy > p { margin:0 0 10px; color:var(--cream-dim); font-size:.92rem; }
.loyalty-pass-copy > p b { color:var(--cream); font-size:1.14rem; }
.loyalty-pass-copy > p b::first-letter { color:var(--orange); }
.loyalty-pass-progress { height:11px; overflow:hidden; border:1px solid rgba(242,177,52,.55); border-radius:999px; background:rgba(0,0,0,.62); }
.loyalty-pass-progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg, #ff4b16, var(--orange), var(--gold)); box-shadow:0 0 15px var(--orange); transition:width .4s ease; }
.loyalty-pass-copy small { display:block; margin-top:9px; color:var(--orange); font-size:.77rem; font-weight:800; }
.loyalty-pass-emblem {
  position:relative; display:grid; place-items:center; width:98px; height:98px; margin:auto;
  border:3px solid var(--gold); border-radius:30% 30% 44% 44%; transform:rotate(45deg);
  background:linear-gradient(145deg, #ff9d14, #9b3005 52%, #211108); box-shadow:0 0 30px rgba(242,121,10,.48), inset 0 0 20px rgba(255,217,89,.35);
}
.loyalty-pass-emblem::before { content:""; position:absolute; inset:9px; border:1px solid rgba(255,255,255,.65); border-radius:inherit; }
.loyalty-pass-emblem span { color:#fff4bf; font-size:2.8rem; line-height:1; transform:rotate(-45deg); text-shadow:0 2px 8px #7b2400; }
.loyalty-pass-emblem b { position:absolute; right:9px; bottom:6px; display:grid; place-items:center; min-width:25px; height:25px; padding:0 5px; border-radius:50%; color:#251207; background:var(--gold); font-size:.72rem; transform:rotate(-45deg); }
.loyalty-rewards-intro { margin-bottom:20px; color:var(--cream-dim); font-size:.86rem; line-height:1.55; }

/* Bandeau « récompense prête » : le palier est atteint et s'appliquera seul. */
.loyalty-ready-banner[hidden] { display:none; }
.loyalty-ready-banner { display:grid; gap:5px; margin-bottom:16px; padding:14px 16px; border-radius:14px;
  border:1px solid rgba(82,215,100,.45); background:linear-gradient(120deg, rgba(35,77,29,.5), rgba(13,20,13,.9));
  animation:loyalty-ready-in .42s cubic-bezier(.34,1.15,.5,1); }
.loyalty-ready-banner strong { color:#72e985; font-size:1rem; }
.loyalty-ready-banner span { color:var(--cream-dim); font-size:.82rem; line-height:1.5; }
@keyframes loyalty-ready-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Palier atteint, en attente d'application automatique : doit se distinguer du
   palier « en cours » (encore des points à gagner) comme des paliers obtenus. */
.loyalty-tier-item.is-ready .loyalty-tier-marker { border-color:#52d764; color:#0f1a10; background:#8bf29c;
  box-shadow:0 0 0 0 rgba(82,215,100,.6); animation:loyalty-ready-pulse 2.1s ease-out infinite; }
@keyframes loyalty-ready-pulse { 70% { box-shadow:0 0 0 11px rgba(82,215,100,0); } 100% { box-shadow:0 0 0 0 rgba(82,215,100,0); } }
.loyalty-reward-card.is-ready { border-color:rgba(82,215,100,.6);
  background:linear-gradient(120deg, rgba(35,77,29,.52), rgba(13,20,13,.96)); box-shadow:0 0 26px rgba(82,215,100,.22); }
.loyalty-reward-card.is-ready .loyalty-tier-number strong,
.loyalty-reward-card.is-ready .loyalty-reward-meta { color:#72e985; }
.loyalty-reward-card.is-ready .loyalty-reward-icon { color:#8bf29c; background:rgba(82,215,100,.14); }

@media (prefers-reduced-motion:reduce) {
  .loyalty-ready-banner, .loyalty-tier-item.is-ready .loyalty-tier-marker { animation:none; }
}
.loyalty-rewards-list { display:grid; gap:0; }
.loyalty-tier-item { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:stretch; }
.loyalty-tier-rail { position:relative; display:flex; justify-content:center; }
.loyalty-tier-item:not(:last-child) .loyalty-tier-rail::after { content:""; position:absolute; top:32px; bottom:-1px; width:3px; background:rgba(107,98,85,.5); }
.loyalty-tier-item.is-unlocked:not(:last-child) .loyalty-tier-rail::after { background:#52d764; box-shadow:0 0 9px rgba(82,215,100,.45); }
.loyalty-tier-marker { position:relative; z-index:1; display:grid; place-items:center; width:31px; height:31px; border:2px solid var(--cream-dim); border-radius:50%; color:var(--cream-dim); background:#101110; font-size:.82rem; font-weight:900; }
.loyalty-tier-item.is-unlocked .loyalty-tier-marker { border-color:#52d764; color:#fff; background:#2fae45; box-shadow:0 0 15px rgba(82,215,100,.55); }
.loyalty-tier-item.is-current .loyalty-tier-marker, .loyalty-tier-item.is-selected .loyalty-tier-marker { border-color:var(--orange); color:#fff; background:#c74409; box-shadow:0 0 17px rgba(242,121,10,.7); }
.loyalty-reward-card {
  display:grid; grid-template-columns:58px 48px minmax(0,1fr) auto; gap:12px; align-items:center; margin:0 0 13px; padding:14px;
  border:1px solid rgba(248,239,221,.14); border-radius:17px; background:rgba(24,25,25,.9); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.loyalty-reward-card.is-unlocked { border-color:rgba(82,215,100,.42); background:linear-gradient(120deg, rgba(35,77,29,.34), rgba(13,20,13,.95)); }
.loyalty-reward-card.is-current { border-color:var(--orange); background:linear-gradient(120deg, rgba(113,42,8,.5), rgba(29,16,9,.97)); box-shadow:0 0 22px rgba(242,121,10,.2); }
.loyalty-reward-card.is-selected { border-color:var(--gold); background:linear-gradient(120deg, rgba(157,54,6,.58), rgba(42,18,7,.98)); box-shadow:0 0 25px rgba(242,121,10,.3); }
.loyalty-reward-card.is-locked { opacity:.7; }
.loyalty-tier-number { align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:1px solid rgba(248,239,221,.15); }
.loyalty-tier-number span { color:var(--cream-dim); font-size:.58rem; font-weight:800; }
.loyalty-tier-number strong { color:var(--cream); font:2rem/1 var(--font-display); }
.loyalty-reward-card.is-current .loyalty-tier-number strong, .loyalty-reward-card.is-selected .loyalty-tier-number strong { color:var(--orange); }
.loyalty-reward-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; color:var(--gold); background:rgba(242,177,52,.1); font-size:1.35rem; }
.loyalty-reward-card.is-unlocked .loyalty-reward-icon { color:#72e985; background:rgba(82,215,100,.1); }
.loyalty-reward-card.is-locked .loyalty-reward-icon { filter:grayscale(1); color:var(--cream-dim); background:rgba(255,255,255,.05); }
.loyalty-reward-copy h3 { margin:0 0 3px; color:var(--cream); font-size:.98rem; }
.loyalty-reward-copy p { margin:0; color:var(--cream-dim); font-size:.76rem; line-height:1.35; }
.loyalty-reward-meta { display:block; margin-top:5px; color:var(--gold); font-size:.62rem; font-weight:900; letter-spacing:.35px; }
.loyalty-reward-card.is-unlocked .loyalty-reward-meta { color:#72e985; }
.loyalty-reward-action { min-width:132px; padding:10px 12px; border:1px solid var(--gold); border-radius:10px; background:transparent; color:var(--gold); cursor:pointer; font:800 .72rem var(--font-body); }
.loyalty-reward-card.is-unlocked .loyalty-reward-action { border-color:#52d764; color:#72e985; }
.loyalty-reward-action:hover:not(:disabled), .loyalty-reward-card.is-selected .loyalty-reward-action { background:var(--orange); border-color:var(--orange); color:#fff; }
.loyalty-reward-card.is-unlocked .loyalty-reward-action:hover:not(:disabled) { background:#2f9e58; border-color:#2f9e58; }
.loyalty-reward-action:disabled { border-color:rgba(248,239,221,.15); color:var(--cream-dim); cursor:not-allowed; }
.loyalty-code-panel > p { color: var(--cream-dim); margin-bottom: 18px; }
.loyalty-code-panel label { display: block; margin-bottom: 8px; font-size: 0.82rem; font-weight: 700; }
.loyalty-code-row { display: flex; gap: 10px; }
.loyalty-code-row input { min-width: 0; flex: 1; padding: 13px 14px; border: 1px solid rgba(248,239,221,0.16); border-radius: 11px; background: var(--black); color: var(--cream); font: 700 0.92rem var(--font-body); text-transform: uppercase; letter-spacing: 0.6px; }
.loyalty-code-row input:focus { outline: none; border-color: var(--gold); }
.loyalty-history-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.loyalty-refresh { width: 40px; height: 40px; border: 1px solid rgba(248,239,221,0.13); border-radius: 50%; font-size: 1.3rem; }
.loyalty-history-list { display: grid; gap: 10px; max-height: 610px; overflow-y: auto; }
.loyalty-history-item { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 15px; border: 1px solid rgba(248,239,221,0.08); border-radius: 13px; background: rgba(23,20,15,0.5); }
.loyalty-history-item strong { color: var(--cream); }
.loyalty-history-item time { color: var(--cream-dim); font-size: 0.76rem; }
.loyalty-history-points { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #72d7a4; font-weight: 800; }
.loyalty-history-points.is-negative { color: #ff8b7a; }
.loyalty-empty { padding: 28px 8px; color: var(--cream-dim); text-align: center; }
.loyalty-page-feedback { min-height: 24px; margin: -18px 0 20px; text-align: center; font-weight: 700; }
.loyalty-page-feedback.is-success { color: #72d7a4; }
.loyalty-page-feedback.is-error { color: #ff8b7a; }
.loyalty-page-feedback.is-info { color: var(--gold); }
.loyalty-guest { max-width: 780px; }
.loyalty-guest-card { padding: 48px; text-align: center; }
.loyalty-guest-icon { display: block; margin-bottom: 18px; font-size: 4rem; }
.loyalty-guest-card .btn { margin-top: 26px; }

@media (max-width: 900px) {
  .loyalty-web-grid { grid-template-columns: 1fr; }
  .loyalty-history-list { max-height: none; }
}
@media (max-width: 600px) {
  .loyalty-web-main { padding-top: 120px; }
  .loyalty-web-heading { align-items: flex-start; flex-direction: column; }
  .loyalty-member-card, .loyalty-member-card-content { min-height: 290px; }
  .loyalty-member-card-content { padding: 22px; }
  .loyalty-card-points strong { font-size: 4.4rem; }
  .loyalty-card-bottom { align-items: flex-start; flex-direction: column; }
  .loyalty-code-row { flex-direction: column; }
  .loyalty-rewards-panel { padding:16px 12px; }
  .loyalty-pass-summary { grid-template-columns:minmax(0,1fr) 74px; gap:12px; padding:16px; }
  .loyalty-pass-emblem { width:68px; height:68px; border-radius:25% 25% 40% 40%; }
  .loyalty-pass-emblem span { font-size:2rem; }
  .loyalty-pass-copy > strong { font-size:2.25rem; }
  .loyalty-tier-item { grid-template-columns:34px minmax(0,1fr); }
  .loyalty-tier-marker { width:27px; height:27px; font-size:.7rem; }
  .loyalty-tier-item:not(:last-child) .loyalty-tier-rail::after { top:28px; }
  .loyalty-reward-card { grid-template-columns:48px 42px minmax(0,1fr); gap:9px; padding:12px 10px; }
  .loyalty-reward-action { grid-column:1 / -1; width:100%; }
  .loyalty-tier-number strong { font-size:1.65rem; }
  .loyalty-reward-icon { width:39px; height:39px; }
  .loyalty-reward-action { width:100%; }
  .loyalty-code-row .btn { width: 100%; }
  .loyalty-panel { padding: 20px; }
  .loyalty-guest-card { padding: 34px 20px; }
  .loyalty-back-link { font-size: 0.8rem; padding: 8px 12px; }
}
.loyalty-reward-actions { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }
.loyalty-reward-cancel { border: 0; background: transparent; color: #d8cdbb; text-decoration: underline; cursor: pointer; font: inherit; font-size: .78rem; }
.has-loyalty-modal { overflow: hidden; }
.loyalty-voucher-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1rem; }
.loyalty-voucher-modal[hidden] { display: none; }
.loyalty-voucher-backdrop { position: absolute; inset: 0; background: rgba(8, 6, 4, .82); backdrop-filter: blur(8px); }
.loyalty-voucher-dialog { position: relative; width: min(440px, 100%); padding: 2rem; text-align: center; border: 1px solid rgba(242,177,52,.5); border-radius: 28px; background: linear-gradient(155deg,#251b12,#0f0d0a); color: #fff7e8; box-shadow: 0 26px 90px rgba(0,0,0,.6); }
.loyalty-voucher-close { position: absolute; top: .75rem; right: .9rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.09); color: white; font-size: 1.7rem; cursor: pointer; }
.loyalty-voucher-kicker { color: #f2b134; font-size: .72rem; font-weight: 900; letter-spacing: .16em; }
.loyalty-voucher-dialog h2 { margin: .55rem 0 .35rem; font-size: clamp(1.65rem,5vw,2.3rem); }
.loyalty-voucher-dialog > p { color: #d8cdbb; }
.loyalty-voucher-qr { width: 238px; height: 238px; max-width: 100%; margin: 1.25rem auto .75rem; padding: 12px; display: grid; place-items: center; background: white; border-radius: 20px; }
.loyalty-voucher-qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.loyalty-voucher-dialog code { display: block; overflow-wrap: anywhere; color: #f2b134; font-size: .76rem; }
.loyalty-voucher-help { margin: 1rem 0 1.25rem; font-size: .88rem; line-height: 1.45; }
@media (max-width: 600px) { .loyalty-voucher-dialog { padding: 1.5rem 1rem 1.25rem; border-radius: 22px; } .loyalty-voucher-qr { width: 210px; height: 210px; } }