:root{--primary:#c0392b;--secondary:#f4a100;--ink:#172033;--muted:#778196;--bg:#f3f6fb;--card:#fff;--success:#1f9d61;--blue:#2563eb}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}body{background:radial-gradient(circle at top left,rgba(244,161,0,.14),transparent 28%),var(--bg);color:var(--ink);padding-bottom:104px}.app{width:min(100%,760px);margin:auto;padding:14px}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:13px 15px;border:1px solid rgba(23,32,51,.05);border-radius:20px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);box-shadow:0 8px 25px rgba(23,32,51,.06)}.brand{display:flex;align-items:center;gap:11px}.brand img{width:44px;height:44px;object-fit:contain}.brand strong{display:block}.brand small{color:var(--muted)}.icon-button{width:43px;height:43px;border:0;border-radius:14px;background:#fff3d6;color:var(--primary);display:grid;place-items:center;font-size:19px}.balance-card{padding:24px;border-radius:26px;color:#fff;background:linear-gradient(135deg,var(--secondary),var(--primary));box-shadow:0 14px 32px rgba(192,57,43,.2)}.balance-card small{color:rgba(255,255,255,.78)}.balance-card h1{font-size:36px;margin:7px 0}.points{display:inline-flex;gap:7px;align-items:center;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.17)}.section{margin-top:17px}.section-title{display:flex;align-items:center;justify-content:space-between;margin:0 3px 10px}.section-title h2{font-size:18px;margin:0}.section-title a{color:var(--primary);font-size:13px;text-decoration:none}.card{border:0;border-radius:22px;background:var(--card);box-shadow:0 8px 24px rgba(23,32,51,.055)}.card-body{padding:19px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.action-card{padding:17px;text-decoration:none;color:var(--ink);min-height:120px}.action-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:#fff3d6;color:var(--primary);font-size:20px;margin-bottom:12px}.action-card strong{display:block}.action-card small{color:var(--muted)}.list{overflow:hidden}.list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid #edf0f5}.list-item:last-child{border-bottom:0}.list-main{min-width:0}.list-main strong{display:block}.list-main small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.amount{font-weight:800;white-space:nowrap}.amount.credit{color:var(--success)}.amount.debit{color:var(--primary)}.offer{position:relative;padding:18px;overflow:hidden}.offer h3{font-size:24px;margin:0 0 4px}.offer p{color:var(--muted);margin:0 0 14px}.stock{position:absolute;right:12px;top:12px;padding:5px 8px;border-radius:999px;background:#eaf8f1;color:var(--success);font-size:11px}.btn-main{border:0;border-radius:14px;padding:12px 16px;color:#fff;background:linear-gradient(135deg,var(--secondary),var(--primary));font-weight:700}.btn-outline{border:1px solid #dce2eb;border-radius:14px;padding:11px 15px;background:#fff;color:var(--ink);font-weight:700}.form-control{width:100%;min-height:52px;border:1px solid #dce2eb;border-radius:15px;padding:12px 14px;font-size:16px}.form-group{margin-bottom:14px}.form-group label{display:block;margin:0 0 6px;font-weight:700;font-size:13px}.voucher-code{padding:15px;border:1px dashed #f4a100;border-radius:15px;background:#fffbeb;font-family:monospace;font-size:18px;text-align:center;word-break:break-all}.empty{padding:30px;text-align:center;color:var(--muted)}.loading{padding:35px;text-align:center;color:var(--muted)}.alert{padding:13px 15px;border-radius:14px;margin-bottom:12px}.alert-error{background:#fee2e2;color:#991b1b}.alert-success{background:#dcfce7;color:#166534}.profile-row{display:flex;align-items:center;gap:14px}.avatar{width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,var(--secondary),var(--primary));color:#fff;display:grid;place-items:center;font-size:23px;font-weight:800}.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);backdrop-filter:blur(12px);box-shadow:0 -8px 25px rgba(23,32,51,.08)}.bottom-inner{width:min(100%,760px);margin:auto;display:grid;grid-template-columns:repeat(5,1fr)}.nav-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:60px;color:#98a1b2;text-decoration:none;font-size:10px}.nav-link i{font-size:20px}.nav-link.active{color:var(--primary)}.modal{position:fixed;inset:0;z-index:100;display:none;place-items:end center;background:rgba(15,23,42,.55)}.modal.open{display:grid}.modal-panel{width:min(100%,600px);max-height:88vh;overflow:auto;padding:20px;border-radius:25px 25px 0 0;background:#fff}.close{float:right;border:0;background:#edf0f5;width:38px;height:38px;border-radius:12px}.toast{position:fixed;z-index:200;left:50%;bottom:100px;transform:translateX(-50%);width:min(calc(100% - 30px),500px);padding:14px 16px;border-radius:15px;color:#fff;background:#172033;display:none}.toast.show{display:block}.reward-progress{height:12px;background:#edf0f5;border-radius:999px;overflow:hidden}.reward-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--secondary),var(--primary))}.qr-box{width:230px;height:230px;margin:20px auto;padding:12px;border-radius:24px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 28px rgba(23,32,51,.08)}
@media(max-width:440px){.app{padding:10px}.balance-card{padding:20px}.balance-card h1{font-size:31px}.grid{grid-template-columns:1fr 1fr}.card-body{padding:16px}.offer{padding:16px}}

/* Composants liés aux données réelles */
button,.btn-main,.btn-outline{font:inherit;cursor:pointer}.btn-main:disabled,.btn-outline:disabled{cursor:not-allowed;opacity:.62}.full-button{width:100%}.button-link{display:block;text-align:center;text-decoration:none}.full-grid{grid-column:1/-1}.live-indicator{display:inline-flex;align-items:center;gap:6px;color:var(--success);font-size:12px;font-weight:700}.live-indicator i{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(31,157,97,.12)}
.voucher-list{overflow:hidden}.voucher-item{padding:17px;border-bottom:1px solid #edf0f5}.voucher-item:last-child{border-bottom:0}.voucher-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.voucher-head strong,.voucher-head small{display:block}.voucher-head small{margin-top:2px;color:var(--muted)}.status-badge{padding:6px 9px;border-radius:999px;background:#eaf8f1;color:var(--success);font-size:11px;font-weight:800}.voucher-item .voucher-code,.referral-card .voucher-code,.purchase-success .voucher-code{display:flex;width:100%;align-items:center;gap:10px;border:1px dashed #f4a100;color:var(--ink)}.voucher-code small{color:var(--muted);font-family:Arial,sans-serif;font-size:10px}.voucher-code strong{flex:1;font-size:18px;letter-spacing:.08em}.voucher-code i{color:var(--primary)}.voucher-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:7px 12px;margin-top:9px;color:var(--muted);font-size:11px}.offers-grid .offer .btn-main{width:100%}.recharge-help{display:flex;align-items:center;gap:13px}.recharge-help .action-icon{flex:0 0 46px;margin:0}.recharge-help p{margin:5px 0 0;color:var(--muted);line-height:1.45}
.purchase-success{text-align:center}.success-icon,.hero-icon,.level-icon{display:grid;place-items:center;margin:0 auto 12px;width:54px;height:54px;border-radius:17px;color:#fff;background:linear-gradient(135deg,var(--secondary),var(--primary));font-size:22px}.purchase-success .success-icon{background:var(--success)}.purchase-success p{color:var(--muted)}.purchase-success .voucher-code{margin:18px 0}.error-state{margin:16vh auto 0;padding:30px;text-align:center}.error-state>i{font-size:38px;color:var(--primary)}.error-state p{color:var(--muted)}.loader{display:block;width:35px;height:35px;margin:auto;border:4px solid #e3e7ee;border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.hero-card{text-align:center;background:linear-gradient(145deg,#fff8e7,#fff)}.hero-title{margin:4px 0 5px}.hero-text{margin:0;color:var(--muted)}.level-card{display:grid;grid-template-columns:auto 1fr;gap:0 15px;align-items:center}.level-card .level-icon{grid-row:1;margin:0}.level-info small,.level-info p{color:var(--muted)}.level-info h2{margin:2px 0}.level-info p{margin:0;font-size:13px}.level-card .reward-progress{grid-column:1/-1;margin-top:16px}.reward-rules>p{display:flex;align-items:flex-start;gap:13px;margin:0;padding:14px 0;border-bottom:1px solid #edf0f5}.reward-rules>p:first-child{padding-top:0}.reward-rules>p i{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:12px;background:#fff3d6;color:var(--primary)}.reward-rules strong,.reward-rules small{display:block}.reward-rules small{margin-top:3px;color:var(--muted);line-height:1.4}.reward-rules .button-link{margin-top:16px}.profile-row h2{margin:0}.profile-row span{color:var(--muted)}.account-meta{display:flex;justify-content:space-between;gap:12px;margin:6px 0 18px;padding:13px 0;border-top:1px solid #edf0f5;color:var(--muted);font-size:13px}.account-meta strong{color:var(--ink)}.logout-button{color:var(--primary)}.referral-card{text-align:center}.referral-card>small{display:block;margin-bottom:9px;color:var(--muted)}.referral-card .btn-main{margin-top:14px}

/* Connexion et inscription */
.auth-page{padding:0;min-height:100vh;background:radial-gradient(circle at 12% 5%,rgba(244,161,0,.26),transparent 25%),linear-gradient(160deg,#7f1d1d 0,#c0392b 39%,#f3f6fb 39.2%)}.auth-shell{width:min(100%,520px);min-height:100vh;margin:auto;padding:30px 16px;display:flex;flex-direction:column;justify-content:center}.auth-brand{display:flex;align-items:center;gap:16px;margin:0 8px 25px;color:#fff}.auth-brand img{width:75px;height:75px;padding:7px;object-fit:contain;border-radius:22px;background:#fff;box-shadow:0 12px 28px rgba(48,10,10,.2)}.auth-brand h1{margin:0 0 4px;font-size:28px}.auth-brand p{margin:0;color:rgba(255,255,255,.8)}.auth-card{padding:25px;border-radius:27px;background:#fff;box-shadow:0 20px 55px rgba(23,32,51,.18)}.auth-heading span{display:inline-block;padding:5px 9px;border-radius:999px;background:#fff3d6;color:var(--primary);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.auth-heading h2{margin:10px 0 4px}.auth-heading p{margin:0 0 22px;color:var(--muted);line-height:1.45}.input-wrap{position:relative}.input-wrap>i{position:absolute;left:15px;top:50%;transform:translateY(-50%);z-index:1;color:#9ba4b5}.input-wrap .form-control{padding-left:43px;padding-right:44px;background:#f9fafc}.input-wrap .form-control:focus{outline:3px solid rgba(244,161,0,.14);border-color:var(--secondary);background:#fff}.toggle-password{position:absolute;right:5px;top:5px;width:42px;height:42px;border:0;border-radius:11px;background:transparent;color:var(--muted)}.auth-submit{min-height:52px;margin-top:4px}.auth-switch{text-align:center;margin:20px 0 0;color:var(--muted);font-size:14px}.auth-switch a{color:var(--primary);font-weight:800;text-decoration:none}.auth-footer{margin:18px 0 0;text-align:center;color:var(--muted);font-size:12px}.register-shell{padding-top:20px;padding-bottom:20px}.compact-brand{margin-bottom:16px}.compact-brand img{width:62px;height:62px}.register-shell .auth-card{padding-top:21px}.form-group label span{color:var(--muted);font-weight:400}.auth-card [hidden],.modal [hidden]{display:none!important}

@media(max-width:440px){.voucher-meta{flex-direction:column;gap:3px}.auth-shell{justify-content:flex-start;padding-top:23px}.auth-brand{margin-bottom:18px}.auth-card{padding:21px}.register-shell .auth-brand h1{font-size:22px}.register-shell .auth-heading p{margin-bottom:15px}.register-shell .form-group{margin-bottom:11px}.register-shell .form-control{min-height:48px}.offers-grid{grid-template-columns:1fr}.offers-grid .full-grid{grid-column:auto}}

/* Transfert de balance et demandes de recharge */
.wallet-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.wallet-actions .button-link{display:flex;align-items:center;justify-content:center;gap:8px}.operation-tabs{position:sticky;top:83px;z-index:15;display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:17px;background:rgba(255,255,255,.94);box-shadow:0 8px 24px rgba(23,32,51,.08);backdrop-filter:blur(10px)}.operation-tab{padding:11px 8px;border-radius:13px;color:var(--muted);font-size:13px;font-weight:800;text-align:center;text-decoration:none}.operation-tab.active,.operation-tab:hover{color:var(--primary);background:#fff3d6}.operation-section{scroll-margin-top:155px}.operation-intro{margin:0 0 17px;color:var(--muted);line-height:1.48}.tariff-summary{display:grid;gap:5px;margin-top:17px;padding:13px;border-radius:14px;background:#f7f8fb;color:var(--muted);font-size:11px}.tariff-summary>small{color:var(--ink);font-weight:800}.tariff-summary span{display:block}.text-danger{color:var(--primary)}.transfer-recap{margin:15px 0}.transfer-recap p{display:grid;grid-template-columns:1fr auto;gap:3px 12px;margin:0;padding:13px 0;border-bottom:1px solid #edf0f5}.transfer-recap p span{color:var(--muted)}.transfer-recap p small{grid-column:1/-1;color:var(--muted)}.transfer-recap p.total{font-size:18px;border-bottom:0}.transfer-recap p.total strong{color:var(--primary)}.transfer-receipt{display:grid;gap:9px;margin:18px 0;padding:15px;border-radius:15px;background:#f7f8fb}.transfer-receipt span{display:flex;justify-content:space-between}.recharge-confirm{margin-top:16px}.recharge-preview,.request-success{padding:17px;border:1px solid #f4d180;border-radius:17px;background:#fffaf0}.recharge-preview p{color:var(--muted)}.request-success{text-align:center}.request-success>small{display:block;margin:10px 0;color:var(--muted)}.request-success .voucher-code{display:flex;width:100%;align-items:center;gap:10px;margin:14px 0}.request-success .voucher-code strong{flex:1}.request-side{display:flex;flex-direction:column;align-items:flex-end;gap:7px}.cancel-request{border:0;background:transparent;color:var(--primary);font-size:11px;font-weight:800}.status-pending{background:#fff3d6;color:#9a6700}.status-completed{background:#eaf8f1;color:var(--success)}.status-cancelled,.status-expired{background:#edf0f5;color:var(--muted)}
@media(max-width:440px){.wallet-actions{grid-template-columns:1fr}.operation-tabs{top:78px}.transfer-history-item,.recharge-request-item{align-items:flex-start}.request-side{flex:0 0 auto}}
.referral-help{margin:15px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.pin-copy.copied,.pin-copy.copied:disabled{cursor:default;opacity:1;border-color:#70c59b;background:#eaf8f1;color:#166534}.pin-copy.copied i{color:var(--success)}