/* Passage 13 — ISO MAQUETTE : CSS de REFERENCE-VALIDEE/ecrans/paywall.html repris TEL QUEL (ne pas retoucher ; ajouts du site dans feuilles-paiement.css / en fin de fichier, marqués). */

*{box-sizing:border-box;margin:0;padding:0}body{background:#0e2219;color:#f4f1e6;font-family:Inter,sans-serif;display:flex;justify-content:center}
.app{position:relative;width:100%;max-width:430px;height:844px;overflow:hidden;background:radial-gradient(90% 50% at 50% 16%,#2a5a47 0,#1a3d30 45%,#11291f 100%);padding:22px 24px}
.app:before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 30% 40%,rgba(255,255,255,.018) 0 2px,transparent 2px 6px);pointer-events:none}
.cadre{position:absolute;inset:0;border:10px solid #c98a44;box-shadow:inset 0 0 0 2px #9c6127,inset 0 0 60px rgba(0,0,0,.45);pointer-events:none;z-index:9}
.haut{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}
.x{width:38px;height:38px;border-radius:50%;background:rgba(244,241,230,.12);display:grid;place-items:center}
.badge{font:900 13px Nunito;color:#fff;background:#7768E8;padding:6px 12px;border-radius:999px;display:flex;gap:6px;align-items:center;box-shadow:0 0 16px rgba(119,104,232,.6)}
.tete{display:flex;align-items:center;gap:12px;margin-top:12px}
.med{width:76px;height:76px;border-radius:50%;padding:3px;background:linear-gradient(#a6e36f,#FFB95E);flex:none;box-shadow:0 0 22px rgba(166,227,111,.35)}.med img{width:100%;height:100%;border-radius:50%}
.bulle{position:relative;background:#f4f1e6;color:#173B2C;font-weight:700;font-size:14.5px;padding:10px 13px;border-radius:16px}.bulle:before{content:"";position:absolute;left:-8px;top:18px;border:8px solid transparent;border-right-color:#f4f1e6;border-left:0}
h1{font-family:Kalam;font-weight:700;font-size:31px;line-height:1.1;text-align:center;margin-top:14px}
.sl{width:62%;height:3px;background:#FFB95E;border-radius:3px;margin:6px auto 0}
.avant{margin-top:14px;display:flex;flex-direction:column;gap:9px;font-family:Kalam;font-size:18px}
.a{display:flex;align-items:center;gap:10px}.a i{width:24px;height:24px;border-radius:50%;background:#a6e36f;display:grid;place-items:center;flex:none}
.lock{margin-top:14px;border:1.5px dashed rgba(244,241,230,.35);border-radius:16px;padding:10px 12px;display:flex;gap:10px;align-items:center;font-size:13.5px;color:#cfe7b6}
.lock b{color:#fff}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.plan{position:relative;border-radius:18px;padding:12px 8px;text-align:center;background:rgba(244,241,230,.07);border:2px solid rgba(244,241,230,.2)}
.plan.on{background:rgba(119,104,232,.22);border:2.5px solid #9a8df5;box-shadow:0 0 22px rgba(119,104,232,.35)}
.plan small{display:block;font-size:12px;color:#cfe7b6;font-weight:600}.plan .prix{font:900 25px Nunito;margin:2px 0;color:#fff}
.eco{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#FFB95E;color:#173B2C;font:900 11px Nunito;padding:3px 9px;border-radius:999px;white-space:nowrap}
.cta{position:relative;margin-top:16px;width:100%;border:0;border-radius:22px;padding:15px;font:900 20px Nunito;color:#fff;background:linear-gradient(180deg,#8a7cf0,#7768E8);box-shadow:0 6px 0 #5446c4,0 0 30px rgba(119,104,232,.45);overflow:hidden}
.cta small{display:block;font:600 12px Inter;opacity:.9;margin-top:2px}
.cta:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);background-size:220% 100%;animation:shine 2.2s linear infinite}
.conf{display:flex;justify-content:center;gap:8px;margin-top:10px;font-size:11.5px;color:#cfe7b6;flex-wrap:wrap}
.par{text-align:center;margin-top:8px;font-size:13.5px;font-weight:700;color:#f4f1e6;text-decoration:underline;text-underline-offset:3px}
@keyframes shine{to{background-position:-220% 0}}

.cmp{margin-top:14px;border-radius:18px;background:rgba(244,241,230,.05);border:1.5px solid rgba(244,241,230,.18);padding:8px 8px 4px}
.cmp .hd,.cmp .rw{display:grid;grid-template-columns:1fr 84px 96px;align-items:center;gap:6px}
.cmp .col{position:relative;text-align:center;border-radius:14px;padding:8px 4px}.cmp .col small{display:block;font:800 12px Nunito;color:#cfe7b6}.cmp .col b{display:block;font:900 20px Nunito;color:#fff}.cmp .col em{font:600 10.5px Inter;color:#cfe7b6;font-style:normal}
.cmp .col.on{background:rgba(119,104,232,.25);border:2px solid #9a8df5;box-shadow:0 0 18px rgba(119,104,232,.35)}.cmp .tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;font:900 10px Nunito;background:#FFD24A;color:#3b2f00;padding:2px 8px;border-radius:999px}
.cmp .rw{border-top:1px dashed rgba(244,241,230,.16);padding:7px 0}.cmp .lb{font:600 13px Inter;color:#f4f1e6}.cmp .rw.pp .lb{color:#d8d2ff;font-weight:700}.cmp .c{display:grid;place-items:center}.cmp .c.on{background:rgba(119,104,232,.12);align-self:stretch;border-radius:8px}.cmp .no{color:rgba(244,241,230,.35);font-weight:800}
.cta2{display:block;width:100%;margin-top:10px;background:rgba(244,241,230,.08);border:1.5px solid rgba(244,241,230,.3);border-radius:18px;padding:12px;font:800 16px Nunito;color:#f4f1e6}
h1{font-size:26px!important}
html,body{height:auto!important}.app{height:auto!important;min-height:100vh;overflow:visible!important}
.nb{font:900 18px Nunito;color:#fff}