/* ==========================================================================
   AFRICAPASS — styles propres aux écrans
   ========================================================================== */

/* ======================================================================
   ACCUEIL
   ====================================================================== */
.home-top{display:grid;grid-template-columns:1.05fr 1fr;gap:16px}

/* --- carte solde de crédits (visuel principal des deux maquettes) ---
   art-wallet.jpg est le recadrage sans texte de wallet-art.jpg : les JPG
   fournis sont découpés dans les maquettes et contiennent encore les
   titres d'origine, qui apparaîtraient en double derrière les vrais. */
.balance-card{
  min-height:272px;padding:28px;
  display:flex;align-items:center;
  background:var(--grad-panel);
}
/* L'illustration est posée en calque masqué : elle se fond dans la carte
   par la gauche, sans bord net, comme sur la maquette. */
.balance-card::before{
  content:"";position:absolute;inset:0 0 0 auto;width:56%;
  background:url('../assets/art-wallet.jpg') right center/auto 100% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%);
  mask-image:linear-gradient(90deg,transparent 0,#000 46%);
  pointer-events:none;
}
.balance-card .copy{max-width:62%;position:relative;z-index:1}
.balance-kicker{color:#e1e4e7;font-weight:600;font-size:15px}
.balance-amount{display:flex;align-items:baseline;gap:12px;margin:12px 0 14px;flex-wrap:wrap}
.balance-amount strong{font-size:58px;line-height:1;font-weight:800;letter-spacing:-1px}
.balance-amount span{font-size:20px;color:var(--gold);font-weight:700}
.balance-rate{display:flex;align-items:center;gap:9px;color:#cfd4d8;font-size:14px;margin-bottom:20px}
.balance-rate .icon{color:var(--gold);font-size:18px}

/* --- accès rapide --- */
.quick-wrap{display:grid;gap:16px;align-content:start}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.quick-item{
  display:grid;justify-items:center;gap:9px;
  padding:18px 8px;
  border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--panel3);
  font-size:13px;font-weight:700;text-align:center;
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.quick-item .icon{font-size:27px;color:var(--gold)}
.quick-item:hover{border-color:rgba(246,185,27,.45);transform:translateY(-2px)}

/* --- bandeau sécurité --- */
.security-card{display:flex;align-items:center;gap:14px;padding:17px 20px}
.security-card .shield{
  width:46px;height:46px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:23px;
  background:rgba(48,197,103,.13);color:var(--green);
}
.security-card .txt b{display:block;font-size:14.5px}
.security-card .txt small{color:var(--muted);font-size:12.5px}
.security-card .lock{
  margin-left:auto;flex:none;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.05);color:#aeb6bc;font-size:19px;
}

.home-middle{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* --- bannière promo objectifs --- */
.promo-card{
  min-height:262px;padding:32px;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  background:var(--grad-panel);
}
.promo-card::before{
  content:"";position:absolute;inset:0 0 0 auto;width:46%;
  background:url('../assets/art-money.jpg') right center/auto 100% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 52%);
  mask-image:linear-gradient(90deg,transparent 0,#000 52%);
  pointer-events:none;
}
.promo-card h2,.promo-card p,.promo-card .btn{position:relative;z-index:1}
.promo-card h2{font-size:31px;max-width:430px;line-height:1.22}
.promo-card p{color:#cbd0d4;font-size:14px}
.promo-card .btn{align-self:flex-start}

/* --- méthodes de recharge --- */
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pay-card{
  height:126px;border-radius:var(--radius-md);
  background-size:cover;background-position:center;
  border:1px solid rgba(255,255,255,.09);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.pay-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.pay-notes{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;color:var(--muted);font-size:12.5px}
.pay-notes span{display:inline-flex;align-items:center;gap:7px}
.pay-notes .icon{font-size:15px;color:var(--gold)}

/* ======================================================================
   ÉCRAN RÉCOMPENSES / OBJECTIFS
   Spécification : AFRICAPASS_REWARDS_VANILLA.zip, adaptée aux tokens et
   composants du projet. Classes préfixées `rw-` : les cartes d'objectif de
   l'Accueil (.goal-card, plus bas) restent inchangées.
   ====================================================================== */

.rewards-screen{display:grid;gap:16px}
.rewards-screen .eyebrow{
  font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--gold);
  display:block;
}

/* --- en-tête + solde --- */
.rw-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:18px;align-items:start}
.rw-head h1{font-size:38px;margin:6px 0 10px;letter-spacing:-.6px}
.rw-sub{max-width:760px;color:var(--muted);line-height:1.65;font-size:14.5px}

.rw-balance{
  border:1px solid rgba(246,185,27,.45);border-radius:var(--radius);padding:20px;
  background:
    radial-gradient(circle at 88% 10%,rgba(246,185,27,.18),transparent 34%),
    var(--grad-panel);
}
.rw-balance > span{display:block;color:var(--muted);font-size:13px}
.rw-balance strong{display:block;font-size:34px;line-height:1.1;font-weight:800;color:var(--gold);margin:5px 0}
.rw-balance strong small{font-size:14px;color:#ddd;font-weight:700}
.rw-balance em{display:block;font-style:normal;color:#b6bec4;font-size:13px;margin-bottom:14px}

/* --- bandeau des trois garanties --- */
.rw-strip{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;
  background:var(--grad-panel);
}
.rw-strip > div{padding:17px 18px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.rw-strip > div + div{border-left:1px solid var(--line)}
.rw-strip b{font-size:14px}
.rw-strip small{grid-column:2;color:var(--muted);margin-top:3px;font-size:12.5px}
.rw-strip .info-icon{
  grid-row:1/3;width:42px;height:42px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-weight:900;font-size:15px;
  background:rgba(246,185,27,.12);color:var(--gold);
}

/* --- grille des objectifs --- */
.rw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.rw-goal{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  background:
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.05),transparent 28%),
    linear-gradient(160deg,#11191e,#0a1014);
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.rw-goal:hover{transform:translateY(-3px);border-color:currentColor}
/* halo teinté : la couleur de l'objectif est portée par `color` */
.rw-goal::after{
  content:"";position:absolute;pointer-events:none;
  width:160px;height:160px;border-radius:50%;right:-60px;top:-80px;
  opacity:.09;background:currentColor;
}
/* `--tone` porte la couleur du palier : `currentColor` ne suffit pas, car le
   disque « $ » redéfinit `color` pour son glyphe et perdrait la teinte. */
.rw-goal.tone-green {--tone:var(--green);  color:var(--tone)}
.rw-goal.tone-blue  {--tone:var(--blue);   color:var(--tone)}
.rw-goal.tone-purple{--tone:var(--purple); color:var(--tone)}
.rw-goal.tone-gold  {--tone:var(--gold);   color:var(--tone)}

.rw-goal-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.rw-goal-label{font-size:11px;letter-spacing:.14em;font-weight:800;color:#aeb6bc}
.rw-goal h2{font-size:38px;margin:5px 0 0;color:currentColor;font-weight:800;line-height:1}
.rw-badge{
  width:52px;height:52px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid currentColor;background:#0b1115;
  font-weight:900;font-size:13px;color:currentColor;
}
.rw-goal.is-done .rw-badge{background:currentColor;color:#0b1115}

.rw-visual{height:110px;display:grid;place-items:center}
.coin-stack{position:relative;width:110px;height:85px}
.coin-stack span{
  position:absolute;width:78px;height:24px;left:15px;border-radius:50%;
  background:linear-gradient(#4f565a,#171b1e);border:1px solid #646d73;
}
.coin-stack span:nth-child(1){bottom:8px}
.coin-stack span:nth-child(2){bottom:23px}
.coin-stack span:nth-child(3){bottom:38px}
.coin-stack .goal-symbol{
  position:absolute;right:4px;top:4px;
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 25%,#fff7c2,var(--tone,var(--gold)) 72%);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  color:#16130b;font-size:31px;font-weight:900;
}

.rw-meta{display:flex;justify-content:space-between;gap:10px;color:var(--text)}
.rw-meta small{display:block;color:var(--muted);font-size:11px}
.rw-meta b{display:block;margin-top:3px;font-size:12px}
.rw-remaining{text-align:right}
.rw-track{height:8px;border-radius:99px;background:#273038;overflow:hidden;margin:12px 0}
.rw-fill{height:100%;border-radius:99px;background:currentColor;transition:width .45s var(--ease)}
.rw-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rw-bottom > span{font-size:11px;color:#aab2b8}
.rw-bottom .btn-outline{border-color:currentColor;color:currentColor}

/* --- objectif en cours --- */
.rw-active{
  border:1px solid rgba(246,185,27,.5);border-radius:var(--radius);padding:22px;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;
  background:
    radial-gradient(circle at 80% 40%,rgba(246,185,27,.12),transparent 34%),
    var(--grad-panel);
}
.rw-active h2{font-size:30px;margin:7px 0}
.rw-active p{color:#c4cbd0;font-size:14px}
.rw-active-progress{height:8px;border-radius:99px;background:#273038;overflow:hidden;margin:12px 0;max-width:700px}
.rw-active-progress > div{height:100%;border-radius:99px;background:var(--gold);transition:width .45s var(--ease)}
.rw-active-numbers{display:flex;justify-content:space-between;gap:12px;max-width:700px;font-size:12px;color:var(--muted)}
.rw-active-numbers strong{color:var(--gold)}
.rw-active-actions{display:grid;gap:10px;min-width:190px}

/* --- comment ça marche --- */
.rw-how h2{font-size:27px;margin:6px 0 0}
.rw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.rw-steps article{border:1px solid var(--line);border-radius:var(--radius-md);padding:17px;background:var(--panel3)}
.rw-steps article > span{font-size:28px;color:var(--gold);font-weight:900;line-height:1}
.rw-steps h3{margin:10px 0 7px;font-size:15px}
.rw-steps p{color:var(--muted);font-size:13px;line-height:1.5}

/* ======================================================================
   OBJECTIFS
   ====================================================================== */
.goals-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.goal-card{
  display:grid;gap:5px;align-content:start;
  padding:18px;
  border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--panel3);
  position:relative;
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.goal-card:hover{transform:translateY(-2px)}
.goal-card .goal-amount{font-size:33px;font-weight:800;line-height:1}
.goal-card .goal-credits{color:#cbd1d6;font-size:13.5px}
.goal-card .goal-star{
  position:absolute;top:16px;right:16px;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-size:15px;
  border:1px solid var(--line);color:var(--muted2);background:rgba(255,255,255,.03);
}
.goal-card .bar-row{margin:16px 0 12px}
.goal-card .btn-outline{width:100%}

/* couleurs par palier (§4) */
.goal-10  .goal-amount{color:var(--green)}
.goal-10  .bar .fill{background:var(--green)}
.goal-10  .btn-outline{border-color:rgba(48,197,103,.55);color:var(--green)}
.goal-10:hover{border-color:rgba(48,197,103,.5)}
.goal-20  .goal-amount{color:var(--blue)}
.goal-20  .bar .fill{background:var(--blue)}
.goal-20  .btn-outline{border-color:rgba(46,156,255,.55);color:var(--blue)}
.goal-20:hover{border-color:rgba(46,156,255,.5)}
.goal-50  .goal-amount{color:var(--purple)}
.goal-50  .bar .fill{background:var(--purple)}
.goal-50  .btn-outline{border-color:rgba(199,101,240,.55);color:var(--purple)}
.goal-50:hover{border-color:rgba(199,101,240,.5)}
.goal-100 .goal-amount{color:var(--gold)}
.goal-100 .bar .fill{background:var(--gold)}
.goal-100 .btn-outline{border-color:rgba(246,185,27,.55);color:var(--gold)}
.goal-100:hover{border-color:rgba(246,185,27,.5)}

.goal-card.completed .goal-star{border-color:rgba(246,185,27,.5);color:var(--gold);background:rgba(246,185,27,.12)}

/* ======================================================================
   ÉCRAN DÉTAIL OBJECTIF
   Design de référence : AFRICAPASS_DETAIL_OBJECTIF.png
   Réutilise .howto / .howto-step / .bubble de l'écran Recharge.
   ====================================================================== */

.gd-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:16px;align-items:start}
.gd-col{display:grid;gap:16px;min-width:0}

/* --- colonne gauche : l'objectif --- */
.gd-goal{padding:22px;display:grid;justify-items:center;gap:0;text-align:center}
.gd-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:99px;
  border:1px solid rgba(246,185,27,.55);background:rgba(246,185,27,.10);
  color:var(--gold);font-size:11.5px;font-weight:800;letter-spacing:.09em;
}
.gd-badge .icon{font-size:14px}
.gd-amount{font-size:54px;font-weight:900;color:var(--gold);line-height:1;margin:18px 0 6px}
.gd-win{font-size:14px;font-weight:700;letter-spacing:.06em;color:#dfe4e8}
.gd-note{width:100%;margin-top:14px;text-align:left}
.gd-know{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.gd-art{
  width:100%;max-width:320px;height:172px;margin:16px 0 4px;
  background:url('../assets/art-money.jpg') center/contain no-repeat;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 52%,transparent 82%);
  mask-image:radial-gradient(ellipse at 50% 50%,#000 52%,transparent 82%);
}

.gd-progress{
  width:100%;margin-top:14px;padding:16px 18px;text-align:left;
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel3);
}
.gd-progress-label{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:#aeb6bc}
.gd-progress-value{font-size:26px;font-weight:800;margin:6px 0 12px}
.gd-progress-value .done{color:var(--green)}
.gd-progress-value .total{color:var(--muted);font-size:20px}
.gd-progress-row{display:flex;align-items:center;gap:12px}
.gd-progress-row .bar{flex:1}
.gd-progress-row .bar .fill{background:var(--gold)}
.gd-pct{font-size:15px;font-weight:800;color:var(--text);min-width:52px;text-align:right}

/* --- colonne droite : utiliser ses crédits --- */
.gd-section-label{font-size:11.5px;font-weight:800;letter-spacing:.09em;color:#aeb6bc;display:block}
.gd-balance{
  display:flex;align-items:center;gap:14px;margin-top:12px;
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--panel3);
}
.gd-balance .wallet-ico{
  width:46px;height:46px;flex:none;border-radius:12px;
  display:grid;place-items:center;font-size:22px;
  background:rgba(246,185,27,.12);color:var(--gold);
}
.gd-balance small{display:block;color:var(--muted);font-size:12.5px}
.gd-balance b{display:block;font-size:26px;font-weight:800;line-height:1.2;margin:2px 0}

.gd-use-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gd-use-head .rate{color:var(--green);font-size:13px;font-weight:700;white-space:nowrap}
.gd-ask{color:var(--muted);font-size:13.5px}

.gd-input-group{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#0b1116;
  padding:0 10px 0 14px;min-height:52px;
}
.gd-input-group:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(246,185,27,.12)}
.gd-input-group > .icon{color:var(--muted);font-size:19px;flex:none}
.gd-input-group input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--text);
  font-size:15px;padding:13px 0;
}
.gd-input-group input:focus{outline:none}
.gd-max{
  flex:none;padding:7px 14px;border-radius:8px;
  border:1px solid rgba(246,185,27,.5);background:rgba(246,185,27,.12);
  color:var(--gold);font-weight:800;font-size:12.5px;
}
.gd-max:hover{background:rgba(246,185,27,.2)}

.gd-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gd-quick button{
  min-height:48px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:#0b1116;
  font-weight:700;font-size:14px;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.gd-quick button:hover:not([disabled]){border-color:var(--gold);color:var(--gold)}
.gd-quick button.active{background:var(--grad-nav-active);border-color:rgba(246,185,27,.55);color:var(--gold2)}
.gd-quick button[disabled]{opacity:.4;cursor:not-allowed}

.gd-recap{
  border:1px solid var(--line);border-radius:var(--radius-md);
  background:rgba(255,255,255,.02);padding:16px 18px;display:grid;gap:12px;
}
.gd-recap-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13.5px}
.gd-recap-row > span{color:var(--muted)}
.gd-recap-row > b{font-weight:700;text-align:right;white-space:nowrap}
.gd-recap-row .used{color:var(--gold)}
.gd-recap-row .next{color:var(--green)}

.gd-cta{width:100%;min-height:54px;font-size:14.5px;letter-spacing:.4px}

/* --- panneau de succès --- */
.gd-success{display:grid;justify-items:center;gap:8px;text-align:center;padding:28px 22px}
.gd-success .mark{
  width:82px;height:82px;border-radius:50%;display:grid;place-items:center;font-size:38px;
  background:rgba(48,197,103,.13);color:var(--green);border:1px solid rgba(48,197,103,.4);
}
.gd-success.is-reward .mark{background:rgba(246,185,27,.13);color:var(--gold);border-color:rgba(246,185,27,.45)}
.gd-success h3{font-size:19px;margin-top:6px}
.gd-success > p{color:var(--muted);font-size:13.5px;max-width:300px}
.gd-success .gd-recap{width:100%;margin-top:10px;text-align:left}
.gd-success .status-actions{display:grid;gap:8px;width:100%;margin-top:6px}

.gd-modal-amount{
  font-size:38px;font-weight:900;color:var(--gold);line-height:1;margin:6px 0 4px;
}
.gd-modal-amount span{font-size:16px;font-weight:700;color:var(--text)}

/* --- bon à savoir --- */
.gd-know-item{display:flex;align-items:flex-start;gap:11px;font-size:13px;color:#c5ccd2;line-height:1.5}
.gd-know-item .icon{color:var(--gold);font-size:16px;flex:none;margin-top:1px}

/* --- détail d'un objectif (ancien bloc, conservé pour la jauge héro) --- */
.goal-hero{
  display:grid;gap:6px;justify-items:center;text-align:center;
  padding:32px 24px;
}
.goal-hero .goal-hero-amount{font-size:56px;font-weight:900;line-height:1}
.goal-hero p{color:var(--muted);font-size:14px}
.goal-hero .bar{margin-top:20px;width:100%;max-width:520px}
.goal-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:560px;margin-top:22px}
.goal-hero-stats div{padding:14px 10px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(255,255,255,.02)}
.goal-hero-stats b{display:block;font-size:19px;font-weight:800}
.goal-hero-stats small{color:var(--muted);font-size:12px}

.contribute-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.contribute-grid button{
  min-height:52px;padding:12px 8px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:#0b1116;
  font-weight:700;font-size:14px;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.contribute-grid button:hover{border-color:var(--gold);color:var(--gold)}
.contribute-grid button.active{background:var(--grad-nav-active);border-color:rgba(246,185,27,.55);color:var(--gold2)}

/* ======================================================================
   WALLET / GAINS
   ====================================================================== */
.wallet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wallet-stat{padding:20px;display:grid;gap:8px;align-content:start}
.wallet-stat .wallet-stat-head{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;font-weight:600}
.wallet-stat .wallet-stat-head .icon{font-size:18px}
.wallet-stat .wallet-stat-value{font-size:31px;font-weight:800;line-height:1.1;letter-spacing:-.5px}
.wallet-stat .wallet-stat-sub{color:var(--muted2);font-size:12.5px}
.wallet-stat.is-credit{border-color:rgba(246,185,27,.3)}
.wallet-stat.is-credit .wallet-stat-head .icon,.wallet-stat.is-credit .wallet-stat-value{color:var(--gold)}
.wallet-stat.is-reward{border-color:rgba(48,197,103,.3)}
.wallet-stat.is-reward .wallet-stat-head .icon,.wallet-stat.is-reward .wallet-stat-value{color:var(--green)}
.wallet-stat.is-reserved{border-color:rgba(46,156,255,.3)}
.wallet-stat.is-reserved .wallet-stat-head .icon,.wallet-stat.is-reserved .wallet-stat-value{color:var(--blue)}

/* ======================================================================
   ÉCRAN WALLET — design de référence : assets/reference-wallet.png
   (livré dans AFRICAPASS_WALLET_REACT_2026.zip)
   ====================================================================== */

.title-row{margin-bottom:4px}
.title-row h1{font-size:28px;margin:0 0 6px}
.breadcrumb{color:var(--muted);font-size:14px;display:flex;align-items:center;gap:8px}
.breadcrumb .sep{color:var(--muted2);font-size:15px}
.breadcrumb a:hover{color:var(--gold)}

.wallet-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:16px}

.credit-card,.gain-card{
  min-height:245px;padding:24px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  overflow:hidden;
}
.credit-card{border-color:#8a6500}
.gain-card{border-color:#155f33}

.balance-label{font-size:13px;letter-spacing:.6px;color:#cdd4d9;font-weight:700}
.credit-card .balance-big,
.gain-card .balance-big{font-size:44px;font-weight:800;line-height:1.05;margin:10px 0 6px}
.credit-card .balance-big{color:var(--gold)}
.credit-card .balance-big span{font-size:18px;font-weight:700}
.gain-card .balance-big{color:var(--green)}
.credit-card .equiv,.gain-card .equiv{color:#c5cbd0;font-size:15px}
.credit-card .rate{display:flex;align-items:center;gap:8px;font-size:14px;color:#c5cbd0;margin-top:10px}
.credit-card .rate .icon{color:var(--gold);font-size:16px}
.reserved-note{display:flex;align-items:center;gap:8px;color:var(--blue);font-size:12.5px;margin-top:8px}
.reserved-note .icon{font-size:15px}

.gold-btn,.green-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:12px 20px;border-radius:10px;
  font-weight:800;font-size:14px;letter-spacing:.3px;margin-top:18px;
  transition:filter .18s var(--ease),transform .12s var(--ease);
}
.gold-btn{background:linear-gradient(135deg,var(--gold),#ffd052);color:#141414}
.green-btn{background:linear-gradient(135deg,#0f9f3e,#20c85b);color:#fff}
.gold-btn:hover,.green-btn:hover{filter:brightness(1.07)}
.gold-btn:active,.green-btn:active{transform:translateY(1px)}
.gold-btn[aria-disabled="true"],.green-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* illustration du portefeuille, reprise de l'univers visuel des maquettes */
.wallet-visual{
  width:230px;height:170px;flex:none;
  background:url('../assets/art-wallet.jpg') center/contain no-repeat;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 55%,transparent 78%);
  mask-image:radial-gradient(ellipse at center,#000 55%,transparent 78%);
}
.dollar-mark{
  width:126px;height:126px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  color:#65e88e;font-size:74px;font-weight:800;line-height:1;
  border:1px solid #168c42;
  background:radial-gradient(circle,rgba(30,191,80,.15),transparent 60%);
  text-shadow:0 0 20px rgba(45,255,103,.4);
}

/* --- actions rapides du Wallet (2 entrées) --- */
.wallet-actions{padding:16px}
.wallet-actions > .label{font-size:11.5px;letter-spacing:.8px;color:#c7cdd2;font-weight:700}
.wallet-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.wallet-action{
  display:flex;align-items:center;gap:14px;text-align:left;
  min-height:90px;padding:16px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel3);
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.wallet-action:hover{transform:translateY(-2px);border-color:#3a4650}
.wallet-action .icon:first-child{font-size:34px;color:var(--gold);flex:none}
.wallet-action.is-subs .icon:first-child{color:#b947e8}
.wallet-action .txt{flex:1;min-width:0}
.wallet-action .txt b{display:block;font-size:16px}
.wallet-action .txt span{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.wallet-action .chev{color:var(--muted);font-size:18px;flex:none}

/* --- tableau des dernières transactions --- */
.tx-table{padding:16px}
.tx-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tx-head-row > b{font-size:11.5px;letter-spacing:.8px;color:#c7cdd2}
.tx-grid{margin-top:12px}
.tx-thead,.tx-row{
  display:grid;grid-template-columns:1fr 1.55fr .9fr .8fr 1fr;
  gap:14px;align-items:center;
}
.tx-thead{color:#c7cdd2;font-size:11px;letter-spacing:.6px;padding:0 8px 10px}
.tx-row{border-top:1px solid #1d252b;padding:13px 8px;font-size:13px}
.tx-cell-type{display:flex;align-items:center;gap:10px;min-width:0}
.tx-cell-type .icon{font-size:22px;color:var(--gold);flex:none}
.tx-row.is-goal    .tx-cell-type .icon{color:#b947e8}
.tx-row.is-out     .tx-cell-type .icon{color:var(--green)}
.tx-row.is-buy     .tx-cell-type .icon{color:var(--blue)}
.tx-cell-type b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-cell-type .tx-date-inline{display:none;color:var(--muted);font-size:11.5px;margin-top:3px}
.tx-desc{color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.tx-amount b{font-weight:800;display:block}
.tx-amount small{display:block;color:#a8b0b6;margin-top:3px;font-size:11.5px}
.tx-status{display:flex;align-items:center;gap:7px;font-weight:600;white-space:nowrap}
.tx-status .icon{font-size:15px}
.tx-status.ok{color:var(--green)}
.tx-status.pending{color:#ffc119}
.tx-status.failed{color:#ff4b36}
.tx-date{color:var(--muted);white-space:nowrap}

/* --- bandeau de réassurance --- */
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:15px}
.trust-row > div{padding:18px;display:flex;align-items:center;gap:14px}
.trust-row > div + div{border-left:1px solid var(--line)}
.trust-row .icon{font-size:28px;color:var(--gold);flex:none}
.trust-row b{font-size:14.5px}
.trust-row small{display:block;color:var(--muted);margin-top:5px;font-size:12.5px;line-height:1.5}

/* ======================================================================
   ÉCRAN RECHARGE — design de référence : AFRICAPASS_RECHARGE_MAQUETTE.png
   ====================================================================== */

.recharge-page{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start}
.recharge-main{display:grid;gap:16px;min-width:0}
.recharge-side{display:grid;gap:16px;position:sticky;top:calc(var(--topbar-h) + 20px)}

.step-title{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;margin-bottom:14px}
.step-title.is-centered{justify-content:center;margin-bottom:18px;letter-spacing:.08em;font-size:13px;color:#c7cdd2}
.step-title .num{
  width:26px;height:26px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(246,185,27,.14);color:var(--gold);
  font-size:13px;font-weight:800;
}

/* --- 1. montants --- */
.amount-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.amount-tile{
  position:relative;
  display:grid;justify-items:center;gap:2px;align-content:start;
  padding:18px 10px 14px;
  border:2px solid var(--line);border-radius:var(--radius-md);
  background:var(--panel3);
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.amount-tile:hover{transform:translateY(-2px);border-color:#3d4954}
.amount-tile .tile-fcfa{font-size:17px;font-weight:700;color:#e7ebee}
.amount-tile .tile-credits{font-size:26px;font-weight:800;color:var(--gold);line-height:1.15;margin-top:6px}
.amount-tile .tile-unit{font-size:12.5px;color:var(--muted)}
.amount-tile .tile-fcfa{white-space:nowrap}
.amount-tile .tile-art{
  width:100%;height:46px;margin-top:12px;
  background:url('../assets/art-cash.jpg') center/contain no-repeat;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 46%,transparent 80%);
  mask-image:radial-gradient(ellipse at 50% 50%,#000 46%,transparent 80%);
}
/* l'illustration grandit avec le montant, comme sur la maquette */
.amount-tile:nth-child(1) .tile-art{height:40px}
.amount-tile:nth-child(2) .tile-art{height:48px}
.amount-tile:nth-child(3) .tile-art{height:56px}
.amount-tile:nth-child(4) .tile-art{height:64px}

.amount-tile.active{border-color:var(--gold);background:linear-gradient(160deg,rgba(246,185,27,.10),transparent 60%)}
.amount-tile .tile-check{
  position:absolute;top:-1px;right:-1px;
  width:26px;height:26px;display:none;place-items:center;
  border-radius:0 var(--radius-md) 0 12px;
  background:var(--gold);color:#141414;font-size:14px;
}
.amount-tile.active .tile-check{display:grid}

.custom-amount{margin-top:16px}

/* --- 2. méthode (réutilise .method-card, partagé avec l'écran Retrait) --- */
.method-pick{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.method-pick .method-row{
  position:relative;
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;min-height:74px;
  border:2px solid var(--line);border-radius:var(--radius-md);
  background:var(--panel3);text-align:left;
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.method-pick .method-row:hover{transform:translateY(-2px);border-color:#3d4954}
.method-pick .method-row.active{border-color:var(--gold)}
.method-pick .method-logo{
  width:52px;height:34px;flex:none;border-radius:7px;
  background-size:cover;background-position:center;
  border:1px solid rgba(255,255,255,.1);
}
.method-pick .method-row b{font-size:15px}
.method-pick .method-tick{
  position:absolute;top:-1px;right:-1px;
  width:26px;height:26px;display:none;place-items:center;
  border-radius:0 var(--radius-md) 0 12px;
  background:var(--gold);color:#141414;font-size:14px;
}
.method-pick .method-row.active .method-tick{display:grid}

/* --- 3. numéro du payeur --- */
.phone-row{display:flex;gap:10px;align-items:stretch}
.country-select{
  position:relative;display:flex;align-items:center;gap:8px;flex:none;
  padding:0 12px;min-height:50px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#0b1116;font-weight:700;font-size:14px;cursor:pointer;
}
.country-select:hover{border-color:#3d4954}
.country-select .icon{color:var(--muted);font-size:16px}
.flag-svg{width:22px;height:15px;display:block;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.country-select select{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:0;
}
.phone-row .input-group{flex:1;min-width:0}
.use-my-number{
  flex:none;width:50px;min-height:50px;
  display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#0b1116;color:var(--muted);font-size:20px;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.use-my-number:hover{border-color:var(--gold);color:var(--gold)}

/* --- comment ça marche --- */
.howto{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:14px}
.howto.howto-4{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr}
.howto-step{display:flex;align-items:center;gap:12px;min-width:0}
.howto-step .bubble{
  width:42px;height:42px;flex:none;border-radius:11px;
  display:grid;place-items:center;font-size:19px;
  background:rgba(246,185,27,.11);color:var(--gold);
}
.howto-step b{display:block;font-size:13.5px;line-height:1.3}
.howto-step small{display:block;color:var(--muted);font-size:12px;margin-top:4px;line-height:1.45}
.howto .arrow{color:var(--muted2);font-size:18px;display:flex}

/* --- 4. récapitulatif --- */
/* le total du récapitulatif tient sur une ligne, comme sur la maquette */
.recharge-side .summary-row.total b{white-space:nowrap}
.recharge-side .summary-row.total span{line-height:1.3}
.summary-method{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.summary-method .method-logo{
  width:34px;height:22px;border-radius:5px;
  background-size:cover;background-position:center;
  border:1px solid rgba(255,255,255,.1);
}
.btn-confirm{
  width:100%;margin-top:16px;
  min-height:52px;font-size:15px;letter-spacing:.4px;
}

/* --- panneau d'état pending / success / failed --- */
.status-panel{display:grid;justify-items:center;gap:10px;text-align:center;padding:26px 20px}
.status-panel .status-mark{
  width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;font-size:34px;
}
.status-panel.is-pending .status-mark{background:rgba(246,185,27,.13);color:var(--gold)}
.status-panel.is-success .status-mark{background:rgba(48,197,103,.13);color:var(--green)}
.status-panel.is-failed  .status-mark{background:rgba(255,90,90,.13);color:var(--red)}
.status-panel.is-pending .status-mark .icon{animation:pulse 1.6s var(--ease) infinite}
.status-panel h3{font-size:18px;margin-top:4px}
.status-panel p{color:var(--muted);font-size:13.5px;line-height:1.55;max-width:280px}
.status-panel .status-amount{font-size:26px;font-weight:800;color:var(--gold)}
.status-panel.is-success .status-amount{color:var(--green)}
.status-panel .status-ref{
  font-size:12px;color:var(--muted2);
  border:1px dashed var(--line);border-radius:8px;padding:7px 12px;
}
.status-panel .status-actions{display:grid;gap:8px;width:100%;margin-top:8px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

.sim-hint{
  border-top:1px dashed var(--line);margin-top:6px;padding-top:14px;
  display:grid;gap:8px;width:100%;
}
.sim-hint > small{color:var(--muted2);font-size:11.5px;line-height:1.5}

.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.method-card{
  position:relative;text-align:left;
  border:2px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;background:var(--panel3);
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.method-card .method-img{height:120px;background-size:cover;background-position:center}
.method-card .method-body{padding:13px 15px}
.method-card b{display:block;font-size:14.5px}
.method-card small{color:var(--muted);font-size:12px}
.method-card:hover{transform:translateY(-2px)}
.method-card.active{border-color:var(--gold)}
.method-card .method-check{
  position:absolute;top:10px;right:10px;
  width:26px;height:26px;border-radius:50%;
  display:none;place-items:center;
  background:var(--gold);color:#141414;font-size:15px;
}
.method-card.active .method-check{display:grid}

/* ======================================================================
   ÉCRAN RETRAIT MTN
   Design de référence : AFRICAPASS_RETRAIT_MTN.png
   Réutilise .gd-* (Détail objectif), .country-select et .use-my-number
   (Recharge), .howto (Recharge).
   ====================================================================== */

.wd-page{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 340px;gap:16px;align-items:start}
.wd-col{display:grid;gap:16px;min-width:0}

.wd-step{padding:20px}
.wd-step.is-info{border-color:rgba(246,185,27,.45)}
.wd-step.is-recap{border-color:rgba(48,197,103,.4)}
.wd-step-title{font-size:12px;font-weight:800;letter-spacing:.09em;color:var(--gold);margin-bottom:16px}
.wd-step.is-recap .wd-step-title{color:var(--green)}

/* --- solde disponible --- */
.wd-balance{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;margin-bottom:18px;
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel3);
}
.wd-balance .txt{flex:1;min-width:0}
.wd-balance small{display:block;color:var(--muted);font-size:12.5px}
.wd-balance b{display:block;font-size:26px;font-weight:800;color:var(--green);line-height:1.25;margin-top:3px}
.wd-balance .equiv{color:var(--muted);font-size:12.5px}
.wd-balance .ico{
  width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;
  font-size:21px;background:rgba(246,185,27,.12);color:var(--gold);
}

/* --- montant --- */
.wd-label{display:block;font-size:13px;color:#cdd4d9;font-weight:600;margin-bottom:8px}
.wd-amount-group{
  display:flex;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#0b1116;
  min-height:52px;padding:0 16px;
}
.wd-amount-group:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(246,185,27,.12)}
.wd-amount-group input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--text);
  font-size:18px;font-weight:700;padding:13px 0;
}
.wd-amount-group input:focus{outline:none}
.wd-amount-group .unit{color:var(--muted);font-size:16px;font-weight:700;flex:none}

.wd-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.wd-quick button{
  min-height:44px;border-radius:9px;
  border:1px solid rgba(246,185,27,.35);background:rgba(246,185,27,.06);
  color:var(--gold);font-weight:700;font-size:13.5px;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.wd-quick button:hover:not([disabled]){background:rgba(246,185,27,.16)}
.wd-quick button.active{background:var(--grad-gold);border-color:transparent;color:#141414}
.wd-quick button[disabled]{opacity:.38;cursor:not-allowed}

/* --- récapitulatif --- */
.wd-recap{display:grid;gap:14px}
.wd-recap-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14px}
.wd-recap-row > span{color:#c3cad0}
.wd-recap-row > b{font-weight:700;white-space:nowrap}
.wd-recap-row.total{
  border-top:1px solid var(--line);padding-top:14px;
  font-size:15px;
}
.wd-recap-row.total > b{color:var(--green);font-size:24px;font-weight:800}
.wd-recap-row.phone > b{font-weight:600;color:#dfe4e8}

.btn-confirm-wd{
  width:100%;min-height:54px;margin-top:18px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(48,197,103,.45);
  background:linear-gradient(135deg,rgba(15,159,62,.3),rgba(32,200,91,.18));
  color:var(--text);font-weight:800;font-size:14.5px;letter-spacing:.3px;
  transition:filter .18s var(--ease);
}
.btn-confirm-wd:hover:not([disabled]){filter:brightness(1.25)}
.btn-confirm-wd[disabled]{opacity:.45;cursor:not-allowed}

/* --- rail : état de la demande --- */
.wd-rail-title{font-size:15px;font-weight:800;color:var(--gold);letter-spacing:.04em;margin-bottom:12px}
.wd-status{display:flex;gap:16px;align-items:flex-start}
.wd-status .clock{
  width:64px;height:64px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:30px;
  border:2px solid var(--gold);color:var(--gold);background:rgba(246,185,27,.08);
}
.wd-status small{display:block;color:var(--muted);font-size:12.5px}
.wd-status .state{display:block;font-size:19px;font-weight:800;margin:4px 0 8px}
.wd-status p{color:var(--muted);font-size:12.5px;line-height:1.55}
.wd-status.is-pending .state{color:var(--gold)}
.wd-status.is-approved .state,.wd-status.is-paid .state{color:var(--green)}
.wd-status.is-rejected .state,.wd-status.is-failed .state{color:var(--red)}
.wd-status.is-approved .clock,.wd-status.is-paid .clock{border-color:var(--green);color:var(--green);background:rgba(48,197,103,.08)}
.wd-status.is-rejected .clock,.wd-status.is-failed .clock{border-color:var(--red);color:var(--red);background:rgba(255,90,90,.08)}

.wd-facts{display:grid;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.wd-facts > div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.wd-facts span{color:var(--muted)}
.wd-facts b{font-weight:700;text-align:right;word-break:break-word}
.wd-facts b.ref{color:var(--gold);letter-spacing:.5px}

/* --- comment ça marche : 5 étapes verticales --- */
.wd-steps{display:grid;gap:16px}
.wd-steps > div{display:flex;gap:12px;align-items:flex-start}
.wd-steps .num{
  width:26px;height:26px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:800;
  border:1px solid rgba(246,185,27,.5);color:var(--gold);
}
.wd-steps .icon{color:var(--gold);font-size:20px;flex:none}
.wd-steps b{display:block;font-size:13.5px}
.wd-steps small{display:block;color:var(--muted);font-size:12px;margin-top:3px;line-height:1.45}

.wd-notes{display:grid;gap:9px}
.wd-notes > li{display:flex;gap:9px;align-items:flex-start;color:#c5ccd2;font-size:12.5px;line-height:1.5}
.wd-notes .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;margin-top:7px}

/* --- bandeau de pied --- */
.wd-trust{
  display:flex;align-items:center;justify-content:center;gap:11px;
  padding:16px;color:#c5ccd2;font-size:13.5px;
}
.wd-trust .icon{color:var(--green);font-size:19px}

/* ======================================================================
   ABONNEMENTS
   ====================================================================== */
.subs-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.sub-card{
  display:grid;gap:4px;
  padding:10px;border:1px solid var(--line);border-radius:13px;
  background:var(--panel3);text-align:center;min-width:0;
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.sub-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px}
.sub-card b{font-size:13px;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-card small{color:var(--muted);font-size:11px}
.sub-card .sub-price{color:var(--gold);font-size:12px;font-weight:800;margin-top:2px}
.sub-card:hover{border-color:rgba(246,185,27,.45);transform:translateY(-3px)}

.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}

/* --- fiche produit --- */
.product-head{display:flex;gap:20px;align-items:center;padding:22px;flex-wrap:wrap}
.product-head img{width:120px;height:120px;border-radius:var(--radius-md);object-fit:cover;flex:none}
.product-head-txt{min-width:220px;flex:1}
.product-head h1{font-size:26px}
.product-head .product-cat{color:var(--muted);font-size:13.5px;margin-top:4px}
.product-head p{color:#c3cad0;font-size:13.5px;margin-top:10px;line-height:1.6;max-width:560px}

.plan-list{display:grid;gap:10px}
.plan-row{
  display:flex;align-items:center;gap:14px;
  padding:15px 16px;text-align:left;width:100%;
  border:2px solid var(--line);border-radius:var(--radius-md);
  background:var(--panel3);
  transition:border-color .18s var(--ease);
}
.plan-row .plan-radio{
  width:22px;height:22px;flex:none;border-radius:50%;
  border:2px solid #3c4751;display:grid;place-items:center;
}
.plan-row.active{border-color:var(--gold)}
.plan-row.active .plan-radio{border-color:var(--gold)}
.plan-row.active .plan-radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--gold)}
.plan-row .plan-txt{flex:1;min-width:0}
.plan-row .plan-txt b{display:block;font-size:14.5px}
.plan-row .plan-txt small{color:var(--muted);font-size:12.5px}
.plan-row .plan-price{text-align:right;flex:none}
.plan-row .plan-price b{display:block;color:var(--gold);font-weight:800;font-size:15px}
.plan-row .plan-price small{color:var(--muted2);font-size:11.5px}

/* ======================================================================
   PROFIL / PARAMÈTRES / SUPPORT
   ====================================================================== */
.profile-head{display:flex;align-items:center;gap:18px;padding:24px;flex-wrap:wrap}
.profile-avatar{
  width:78px;height:78px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--gold),#6b4402);
  display:grid;place-items:center;font-size:26px;font-weight:900;color:#150f00;
  border:3px solid rgba(246,185,27,.35);
}
.profile-head h1{font-size:23px}
.profile-head .profile-phone{color:var(--muted);font-size:14px;margin-top:4px}

.info-list{display:grid}
.info-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0}
.info-row + .info-row{border-top:1px solid var(--line-soft)}
.info-row span{color:var(--muted);font-size:13.5px}
.info-row b{font-size:14px;text-align:right;word-break:break-word}

.menu-list{display:grid}
.menu-item{
  display:flex;align-items:center;gap:14px;
  padding:15px 4px;width:100%;text-align:left;min-height:56px;
}
.menu-item + .menu-item{border-top:1px solid var(--line-soft)}
.menu-item .icon:first-child{font-size:20px;color:var(--muted)}
.menu-item b{flex:1;font-size:14.5px;font-weight:600}
.menu-item .chev{color:var(--muted2);font-size:17px}
.menu-item:hover b{color:var(--gold)}
.menu-item:hover .icon:first-child{color:var(--gold)}
.menu-item.danger b,.menu-item.danger .icon:first-child{color:var(--red)}

.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-q{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 4px;font-weight:700;font-size:14.5px;min-height:56px}
.faq-q .chev{margin-left:auto;color:var(--muted);font-size:18px;transition:transform .2s var(--ease)}
.faq-item.open .faq-q .chev{transform:rotate(180deg)}
.faq-a{display:none;padding:0 4px 18px;color:#bcc3c9;font-size:13.5px;line-height:1.65}
.faq-item.open .faq-a{display:block}

.referral-code{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border:1px dashed rgba(246,185,27,.45);border-radius:var(--radius-md);
  background:rgba(246,185,27,.06);
}
.referral-code b{font-size:19px;letter-spacing:2px;color:var(--gold);font-weight:900;flex:1}

/* ======================================================================
   AUTHENTIFICATION (écran sans shell)
   ====================================================================== */
.auth-screen{
  min-height:100vh;display:grid;place-items:center;padding:24px 18px;
  background:
    radial-gradient(circle at 50% -10%,rgba(246,185,27,.12),transparent 45%),
    var(--bg);
}
.auth-box{width:min(430px,100%);display:grid;gap:18px}
.auth-brand{display:grid;justify-items:center;gap:12px;text-align:center;margin-bottom:4px}
.auth-brand img{width:62px;height:66px}
.auth-brand .brand-text{font-size:27px;font-weight:900;letter-spacing:1px}
.auth-brand .brand-text span{color:var(--gold)}
.auth-brand p{color:var(--muted);font-size:13.5px}
.auth-form{display:grid;gap:14px}
.auth-legal{color:var(--muted2);font-size:11.5px;text-align:center;line-height:1.6}
.auth-legal a{color:var(--gold)}
.auth-perks{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.auth-perks span{display:inline-flex;align-items:center;gap:6px}
.auth-perks .icon{color:var(--green);font-size:14px}

/* ======================================================================
   NOTIFICATIONS
   ====================================================================== */
.notif-row.unread{background:rgba(246,185,27,.05);border-color:rgba(246,185,27,.24)}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}

/* ======================================================================
   RESPONSIVE ≤980px
   ====================================================================== */
@media (max-width:980px){
  .home-top,.home-middle{grid-template-columns:1fr}

  .balance-card{min-height:236px;padding:22px}
  .balance-card .copy{max-width:64%}
  .balance-amount strong{font-size:46px}

  .promo-card{min-height:230px;padding:26px}
  .promo-card h2{font-size:26px;max-width:320px}

  .goals-grid{grid-template-columns:repeat(2,1fr)}
  .subs-grid{grid-template-columns:repeat(4,1fr)}
  .wallet-grid{grid-template-columns:1fr}

  /* --- écran Détail objectif --- */
  .gd-page{grid-template-columns:1fr}
  .gd-amount{font-size:46px}
  .gd-art{height:150px}
  .gd-know{grid-template-columns:1fr}

  /* --- écran Retrait --- */
  .wd-page{grid-template-columns:1fr}

  /* --- écran Recharge --- */
  .recharge-page{grid-template-columns:1fr}
  .recharge-side{position:static}
  .howto{grid-template-columns:1fr;gap:16px}
  .howto .arrow{display:none}

  /* --- écran Récompenses --- */
  .rw-head{grid-template-columns:1fr}
  .rw-head h1{font-size:31px}
  .rw-strip{grid-template-columns:1fr}
  .rw-strip > div + div{border-left:0;border-top:1px solid var(--line)}
  .rw-grid{grid-template-columns:repeat(2,1fr)}
  .rw-active{grid-template-columns:1fr}
  .rw-active-actions{grid-template-columns:1fr 1fr;min-width:0}
  .rw-steps{grid-template-columns:repeat(2,1fr)}

  /* --- écran Wallet --- */
  .title-row h1{font-size:23px}
  .wallet-hero{grid-template-columns:1fr}
  .credit-card,.gain-card{min-height:210px}
  .wallet-visual{width:170px;height:140px}
  .dollar-mark{width:104px;height:104px;font-size:60px}
  .tx-thead{display:none}
  .tx-row{grid-template-columns:1fr auto;gap:10px;align-items:flex-start}
  .tx-desc,.tx-date{display:none}
  .tx-cell-type .tx-date-inline{display:block}
  .tx-amount{text-align:right}
  .tx-status{justify-content:flex-end;grid-column:2}
  .trust-row{grid-template-columns:1fr}
  .trust-row > div + div{border-left:0;border-top:1px solid var(--line)}
  .contribute-grid{grid-template-columns:repeat(2,1fr)}
  .goal-hero .goal-hero-amount{font-size:46px}
}

/* ======================================================================
   RESPONSIVE ≤600px
   ====================================================================== */
@media (max-width:600px){
  .card-pad{padding:16px}
  .page-head h1{font-size:19px}

  .balance-card{min-height:210px;padding:18px}
  .balance-card::before{width:52%;background-size:auto 88%;background-position:right -12px center}
  .balance-card .copy{max-width:66%}
  .balance-amount{gap:8px;margin:10px 0 12px}
  .balance-amount strong{font-size:40px}
  .balance-amount span{font-size:16px}
  .balance-rate{font-size:12.5px;margin-bottom:16px}
  .balance-card .btn{min-height:46px;padding:12px 18px;font-size:14px}

  /* Comme sur reference-mobile.png : les 4 accès rapides forment une seule
     carte, sans encadrement individuel — ce qui laisse la place aux libellés. */
  .quick-grid{gap:2px}
  .quick-item{border:0;background:transparent;padding:10px 2px;font-size:11px;gap:7px}
  .quick-item .icon{font-size:26px}
  .quick-item:hover{transform:none}

  .promo-card{min-height:206px;padding:20px}
  .promo-card::before{width:46%;background-size:auto 78%;background-position:right -6px center}
  .promo-card h2{font-size:22px;max-width:230px}
  .promo-card p{font-size:12.5px}

  .pay-card{height:104px}
  .pay-notes{gap:12px;font-size:11.5px}

  /* --- écran Récompenses, petits écrans --- */
  .rw-head h1{font-size:26px}
  .rw-sub{font-size:13.5px}
  .rw-balance{padding:16px}
  .rw-balance strong{font-size:29px}
  .rw-grid{grid-template-columns:1fr 1fr;gap:9px}
  .rw-goal{padding:13px}
  .rw-goal h2{font-size:30px}
  .rw-badge{width:44px;height:44px;font-size:12px}
  .rw-visual{height:88px}
  .coin-stack{transform:scale(.82)}
  .rw-meta{display:block}
  .rw-remaining{text-align:left;margin-top:7px}
  .rw-bottom{display:grid;gap:8px}
  .rw-bottom .btn-outline{width:100%}
  .rw-active{padding:16px}
  .rw-active h2{font-size:24px}
  .rw-active-actions{grid-template-columns:1fr}
  .rw-how h2{font-size:22px}
  .rw-steps{grid-template-columns:1fr}

  .goals-grid{gap:10px}
  .goal-card{padding:15px}
  .goal-card .goal-amount{font-size:27px}
  /* --- écran Retrait, petits écrans --- */
  .wd-step{padding:15px}
  .wd-balance{padding:13px 14px;gap:11px;margin-bottom:14px}
  .wd-balance b{font-size:22px}
  .wd-quick{gap:7px}
  .wd-quick button{min-height:40px;font-size:12.5px}
  .wd-amount-group input{font-size:16px}
  .wd-recap-row{font-size:13px}
  .wd-recap-row.total > b{font-size:20px}
  .wd-status .clock{width:54px;height:54px;font-size:25px}
  .wd-status .state{font-size:17px}

  /* --- écran Détail objectif, petits écrans --- */
  .gd-goal{padding:16px}
  .gd-amount{font-size:40px;margin:14px 0 4px}
  .gd-win{font-size:12.5px}
  .gd-art{height:112px;margin:10px 0 2px}
  .gd-progress{padding:14px}
  .gd-progress-value{font-size:22px}
  .gd-progress-value .total{font-size:17px}
  .gd-balance{padding:13px 14px;gap:11px}
  .gd-balance b{font-size:22px}
  .gd-quick{grid-template-columns:repeat(4,1fr);gap:7px}
  .gd-quick button{min-height:44px;font-size:13px}
  .gd-recap-row{font-size:12.5px}
  .gd-success{padding:22px 16px}
  .gd-success .mark{width:68px;height:68px;font-size:32px}

  .goal-hero{padding:24px 16px}
  .goal-hero .goal-hero-amount{font-size:40px}
  .goal-hero-stats{grid-template-columns:1fr;gap:8px}

  /* --- écran Recharge, petits écrans : la maquette mobile garde les 4 tuiles
         sur une rangée, sans illustration --- */
  .amount-tiles{grid-template-columns:repeat(4,1fr);gap:7px}
  .amount-tile{padding:12px 4px 10px}
  .amount-tile .tile-fcfa{font-size:11px}
  .amount-tile .tile-credits{font-size:16px;margin-top:4px}
  .amount-tile .tile-unit{font-size:10.5px}
  .amount-tile .tile-art{display:none}
  .amount-tile .tile-check{width:20px;height:20px;font-size:11px}
  .step-title{font-size:14.5px}
  .method-pick{gap:10px}
  .method-pick .method-row{padding:12px;gap:10px;min-height:64px}
  .method-pick .method-logo{width:42px;height:28px}
  .method-pick .method-row b{font-size:13px}
  .country-select{padding:0 9px;font-size:13px}
  .use-my-number{width:46px}
  .status-panel{padding:22px 16px}

  .subs-grid{display:flex;overflow-x:auto;gap:10px;padding-bottom:6px}
  .subs-grid .sub-card{flex:none;width:112px}
  .catalog-grid{grid-template-columns:repeat(2,1fr)}

  .product-head{padding:16px;gap:14px}
  .product-head img{width:84px;height:84px}
  .product-head h1{font-size:21px}

  .modal-actions{grid-template-columns:1fr}
  .list-row{padding:12px 13px;gap:11px}
  .list-icon{width:40px;height:40px;font-size:19px}

  /* --- écran Wallet, petits écrans --- */
  .credit-card,.gain-card{padding:18px}
  .credit-card .balance-big,.gain-card .balance-big{font-size:36px}
  .wallet-visual{width:132px;height:118px}
  .dollar-mark{width:88px;height:88px;font-size:52px}
  /* le libellé du retrait doit tenir sur une ligne, comme sur la maquette */
  .gold-btn,.green-btn{padding:12px 14px;font-size:13px;white-space:nowrap}
  .wallet-action{padding:12px;min-height:78px;gap:10px}
  .wallet-action .icon:first-child{font-size:27px}
  .wallet-action .txt b{font-size:14px}
  .wallet-action .chev{display:none}
}