/* v10.24 : le mur payant (ui/paywall.js) — le papier du Carnet, un ruban doré, encre fixe (lisible en thème sombre) */
.screen-layer.paywall { background: rgba(20, 12, 6, 0.72); display: flex; align-items: center; justify-content: center; z-index: 60; }
.pay-screen { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 16px; box-sizing: border-box; overflow: auto; }
.pay-card { position: relative; width: min(620px, 100%); padding: 34px 30px 18px; box-sizing: border-box; color: #2e1f14;
  background: linear-gradient(180deg, #fbf4e2, #f2e3c0); border: 4px solid #4e2716; border-radius: 10px;
  box-shadow: 0 0 0 3px #c8955a inset, 0 10px 0 #2a160b, 0 18px 40px rgba(0, 0, 0, 0.5); font-family: var(--pixel); text-align: center;
  animation: payIn 0.45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes payIn { from { transform: translateY(24px) scale(0.96); opacity: 0; } }
.pay-ribbon { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 22px;
  background: linear-gradient(180deg, #ffe07c, #e8a830); color: #3a2410; border: 3px solid #4e2716; border-radius: 4px;
  font-size: 0.9em; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 4px 0 #2a160b; }
.pay-title { margin: 4px 0 6px; font-size: 1.45em; line-height: 1.2; color: #4e2716; }
.pay-sub { margin: 0 0 14px; font-size: 0.9em; color: #6a4a30; line-height: 1.4; }
.pay-isles { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 0 0 14px; }
.pay-isle { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 6px; font-size: 0.62em;
  background: color-mix(in srgb, var(--isle) 22%, #fbf4e2); border: 2px solid color-mix(in srgb, var(--isle) 70%, #4e2716); }
.pay-isle.locked { filter: saturate(0.55); opacity: 0.85; }
.pay-isle.done { box-shadow: 0 0 0 2px #6bc38e; }
.pay-isle-ico { font-size: 1.3em; }
.pay-isle.done .pay-isle-ico { color: #2f8a4e; }
.pay-isle-n { font-weight: 700; }
.pay-isle-name { line-height: 1.15; min-height: 2.3em; color: #5a4030; }
.pay-perks { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; text-align: left; font-size: 0.82em; }
.pay-perks li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.3; }
.pay-perk-ico { width: 1.4em; flex: none; text-align: center; }
.pay-buy .btn { font-size: 1.15em; padding: 12px 26px; min-width: 60%; animation: payGlow 2.2s ease-in-out infinite; }
@keyframes payGlow { 50% { box-shadow: 0 0 0 4px rgba(255, 216, 74, 0.45), 0 0 22px rgba(255, 200, 60, 0.55); } }
.pay-once { margin: 7px 0 0; font-size: 0.72em; color: #7a5e44; }
.pay-note { margin: 10px auto 0; max-width: 470px; padding: 8px 12px; border-radius: 6px; background: #fff3c4; border: 2px dashed #c8955a; font-size: 0.78em; line-height: 1.4; }
.pay-note.hidden { display: none; }
.pay-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.pay-actions .btn { font-size: 0.78em; color: #2e1f14; }
.pay-kept { margin: 10px 0 0; font-size: 0.68em; color: #8a6a48; }
@media (max-width: 560px) { .pay-perks { grid-template-columns: 1fr; } .pay-isles { grid-template-columns: repeat(4, 1fr); } }