/* ==========================================================================
   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}
/* « À partir de N crédits » : le libellé sur sa ligne, comme la maquette. */
.sub-card .sub-price{color:var(--gold);font-size:13px;font-weight:800;margin-top:4px;display:grid;gap:1px}
.sub-card .sub-price small{color:var(--muted);font-size:10.5px;font-weight:600}
.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}

/* --- « Ce que vous obtenez » --- */
.check-list{display:grid;gap:12px}
.check-list li{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:#c3cad0;line-height:1.55}
.check-list .icon{color:var(--green);font-size:16px;flex:none;margin-top:1px}

/* --- barre de validation : solde à gauche, action à droite --- */
.buy-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.buy-bar-balance small{display:block;color:var(--muted);font-size:12px}
.buy-bar-balance b{display:block;font-size:20px;font-weight:800;margin-top:2px}
.buy-bar .btn{min-width:220px}

/* --- commandes --- */
.product-head-price{text-align:right;flex:none}
.product-head-price b{display:block;font-size:24px;font-weight:800;color:var(--gold)}
.product-head-price small{color:var(--muted);font-size:12px}

.order-row{position:relative;padding-right:34px}
.order-logo{width:40px;height:40px;border-radius:11px;object-fit:cover;flex:none}
.order-end{text-align:right;display:grid;gap:6px;justify-items:end}
.order-end b{font-weight:800;color:var(--gold);white-space:nowrap}
.order-end b small{color:var(--muted);font-weight:600;font-size:11px}
.order-chevron{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted2);display:flex}

.order-confirm{display:flex;align-items:center;gap:16px}
.order-confirm-icon{
  width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:26px;color:var(--green);
  background:rgba(48,197,103,.12);border:1px solid rgba(48,197,103,.28);
}
.order-confirm b{display:block;font-size:16px}
.order-confirm small{display:block;color:var(--muted);font-size:13px;margin-top:3px;line-height:1.5}

/* --- liste des commandes : tableau au-dessus de 980 px, cartes en dessous --- */
.ord-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.ord-toolbar .chips{margin:0}
.ord-search{min-width:240px;flex:0 1 300px}

.ord-table-wrap{overflow-x:auto}
.ord-table{width:100%;border-collapse:collapse;min-width:720px}
.ord-table thead th{
  text-align:left;padding:10px 12px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);
}
.ord-table td{padding:13px 12px;border-bottom:1px solid #161d23;font-size:13px;vertical-align:middle}
.ord-table tbody tr{cursor:pointer;transition:background .15s var(--ease)}
.ord-table tbody tr:hover{background:rgba(255,255,255,.025)}
.ord-table tbody tr:last-child td{border-bottom:0}
.ord-table .right{text-align:right}
.ord-eye{color:var(--muted2);font-size:17px}
.ord-table tbody tr:hover .ord-eye{color:var(--gold)}

.ord-prod{display:flex;align-items:center;gap:10px;min-width:0}
.ord-prod img{width:28px;height:28px;border-radius:8px;object-fit:cover;flex:none}
.ord-prod b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}

.ord-cards{display:none;gap:12px}
.ord-card{
  display:grid;gap:10px;padding:14px;
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel3);
}
.ord-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ord-card-mid{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}
.ord-card-mid b{color:var(--gold);font-weight:800}
.ord-card-mid b small{color:var(--muted);font-weight:600;font-size:11px}
.ord-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted2)}

/* --- pagination serveur --- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:16px}
.pg-count{color:var(--muted);font-size:12.5px}
.pg-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pg-btn,.pg-num{
  min-width:36px;height:36px;padding:0 11px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--panel3);color:var(--muted);
  font-size:13px;font-weight:600;
}
.pg-btn:hover,.pg-num:hover{border-color:rgba(246,185,27,.4);color:var(--text)}
.pg-num.active{background:var(--gold);border-color:var(--gold);color:#151007;font-weight:800}
.pg-btn.is-off{opacity:.4;pointer-events:none}
.pg-gap{color:var(--muted2);padding:0 2px}

/* --- bloc de livraison --- */
.dlv-field{display:grid;gap:7px;margin-bottom:14px}
.dlv-field label{font-size:12px;color:var(--muted);font-weight:600}
.dlv-value{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--panel3);padding:12px 12px 12px 14px;
}
.dlv-text{
  flex:1;min-width:0;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:14px;letter-spacing:.5px;word-break:break-all;
}
.dlv-text.is-masked{letter-spacing:2px;color:var(--muted)}
.dlv-actions{display:flex;gap:6px;flex:none}
.dlv-btn{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:15px;
}
.dlv-btn:hover{border-color:rgba(246,185,27,.45);color:var(--gold)}

.dlv-instructions{
  margin-top:4px;padding:13px 15px;border-radius:var(--radius-md);
  border:1px solid var(--line);background:rgba(255,255,255,.02);
}
.dlv-instructions b{display:block;font-size:12.5px;margin-bottom:5px}
.dlv-instructions p{color:#c3cad0;font-size:13px;line-height:1.6}

/* ======================================================================
   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);
}

/* Sur grand écran, la carte de connexion seule laissait la page presque vide
   et donnait l'impression d'une interface mobile agrandie. Elle est donc
   accompagnée d'un panneau de présentation, replié sous 980 px. */
.auth-layout{
  width:min(1060px,100%);
  display:grid;grid-template-columns:1fr 430px;gap:64px;align-items:center;
}

.auth-aside{display:grid;gap:26px;min-width:0}
.auth-aside-brand{display:flex;align-items:center;gap:12px}
.auth-aside-brand img{width:44px;height:47px}
.auth-aside-brand .brand-text{font-size:23px;font-weight:900;letter-spacing:1px}
.auth-aside-brand .brand-text span{color:var(--gold)}

/* `balance` répartit les lignes du titre au lieu de laisser un mot orphelin
   sur la dernière. Ignoré par les navigateurs qui ne le connaissent pas. */
.auth-aside h1{
  font-size:40px;line-height:1.15;font-weight:900;letter-spacing:-.5px;
  max-width:15ch;text-wrap:balance;
}
.auth-aside h1 span{color:var(--gold)}
.auth-aside > p{color:var(--muted);font-size:14.5px;line-height:1.65;max-width:46ch}

.auth-aside-perks{display:grid;gap:16px}
.auth-aside-perks li{display:flex;align-items:flex-start;gap:14px}
.auth-aside-perks .ico{
  flex:none;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;font-size:17px;color:var(--green);
  background:rgba(46,204,113,.10);border:1px solid rgba(46,204,113,.22);
}
.auth-aside-perks b{display:block;font-size:14px;font-weight:700}
.auth-aside-perks small{display:block;color:var(--muted2);font-size:12.5px;line-height:1.5;margin-top:2px}

/* Marque et arguments vivent dans le panneau de gauche : les répéter dans la
   carte ferait doublon. Ils reviennent dès que le panneau disparaît. */
.auth-box > .auth-brand,
.auth-box > .auth-perks{display:none}

.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){
  /* Retour à la carte centrée : le panneau de présentation disparaît et la
     marque comme les arguments reprennent leur place dans la carte. */
  .auth-layout{width:auto;grid-template-columns:1fr;gap:0;justify-items:center}
  .auth-aside{display:none}
  .auth-box > .auth-brand{display:grid}
  .auth-box > .auth-perks{display:flex}

  /* Un tableau écrasé sur un téléphone est illisible : on passe en cartes. */
  .ord-table-wrap{display:none}
  .ord-cards{display:grid}
  .ord-toolbar{flex-direction:column;align-items:stretch}
  .ord-search{flex:1 1 auto;min-width:0}

  .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}

  /* La barre de validation passe en pile : le bouton doit rester large. */
  .buy-bar{flex-direction:column;align-items:stretch}
  .buy-bar .btn{min-width:0;width:100%}
  .product-head-price{text-align:left}

  .pager{justify-content:center}
  .pg-count{width:100%;text-align:center}

  .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}
}

/* ==========================================================================
   Progression — XP, niveau et points fidélité (écrans 8 et 9)
   ========================================================================== */

.progression-level{display:grid;gap:10px}
.progression-level .level-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.progression-level .level-head b{font-size:15px}
.progression-level small{color:var(--muted);font-size:12px}

/* Le niveau se lit d'un coup d'œil : c'est la seule information de l'écran
   qu'un joueur cherche activement. */
.level-badge{display:inline-block;padding:4px 12px;border-radius:999px;
  border:1px solid var(--gold);color:var(--gold);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

.progression-loyalty{display:grid;gap:8px;margin-top:14px}
.progression-loyalty .loyalty-total{font-size:28px;line-height:1;color:var(--gold)}
.progression-loyalty p{margin:0;font-size:13px}
.progression-loyalty .btn{justify-self:start;margin-top:4px}

/* ==========================================================================
   Points fidélité au paiement (écran 10)
   ========================================================================== */

.checkout-loyalty{display:grid;gap:6px}
.checkout-loyalty .loyalty-range{width:100%;margin:10px 0 2px;accent-color:var(--gold)}
.checkout-loyalty .loyalty-line{display:flex;align-items:baseline;
  justify-content:space-between;gap:12px;font-size:13px}
.checkout-loyalty .loyalty-line b{color:var(--gold)}

/* Aperçu d'une course sur l'accueil. Réutilise la grille des objectifs :
   les deux blocs se lisent de la même façon, ce sont deux progressions. */
.race-mini{display:grid;gap:6px;padding:14px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--grad-panel);color:inherit;text-decoration:none}
.race-mini:hover{border-color:var(--gold)}
.race-mini b{font-size:14px}
.race-mini .race-mini-prize{color:var(--gold);font-weight:700;font-size:13px}
.race-mini .race-mini-bar{display:block;height:6px;border-radius:999px;
  background:rgba(255,255,255,.08);overflow:hidden}
.race-mini .race-mini-bar i{display:block;height:100%;background:var(--gold)}
.race-mini small{color:var(--muted);font-size:12px}

/* Bandeau « ancien système » : en tête d'écran, jamais en note de bas de page. */
.archive-banner{margin-bottom:18px}
.archive-banner p{margin:4px 0 0;font-size:13px;line-height:1.5}
.archive-badge{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;
}

/* ==========================================================================
   COURSES COLLECTIVES — écrans 3 à 7 (lot 024)

   Ces écrans n'avaient AUCUN style qui leur soit propre : ils s'affichaient
   avec les seules briques génériques `.card`, `.bar`, `.badge`. La refonte
   collective ajoute un classement et une jauge partagée, qui deviennent
   illisibles sans mise en forme.

   Deux points de rupture, comme partout dans ce projet : 980 px et 600 px.
   La barre de progression réutilise `.bar` / `progressBar()` plutôt que d'en
   introduire une seconde.
   ========================================================================== */

/* --- liste des courses ---------------------------------------------------- */
.race-list{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.race-card{padding:16px;display:flex;flex-direction:column;gap:12px;cursor:pointer}
.race-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.race-card.is-closed{cursor:default;opacity:.62}

.race-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.race-head h3{margin:0;font-size:16px}
.race-prize{display:block;margin-top:2px;font-size:20px;font-weight:800;color:var(--gold)}
.race-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.race-meta small{color:var(--muted2);font-size:11.5px}
.race-target{margin:0;font-size:12.5px;color:var(--muted)}

.race-progress{display:flex;flex-direction:column;gap:6px}
.race-progress-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.race-progress-line span{font-size:12.5px;color:var(--muted)}
.race-progress-line b{font-size:15px}

/* --- détail : ma situation, engagement, consultation ---------------------- */
.race-mine{display:flex;flex-direction:column;gap:8px}
.race-engage{display:flex;flex-direction:column;gap:10px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.btn-chip{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);font-size:13.5px;font-weight:700;
  cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease);
}
.btn-chip:hover{border-color:var(--gold);background:var(--panel3)}
.btn-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.race-intel{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.race-intel small{display:block;margin-top:2px;color:var(--muted);font-size:12px}

/* Le restant acheté : c'est l'information qu'on vient de payer, elle doit se
   lire d'un coup d'œil. */
.intel-result{
  margin-top:12px;padding:12px;border-radius:var(--radius-sm);
  border:1px solid rgba(246,185,27,.3);background:rgba(246,185,27,.08);
  display:flex;flex-direction:column;gap:4px;
}
.intel-result b{font-size:17px;color:var(--gold)}
.intel-result span{font-size:13px;color:var(--muted)}
.intel-result small{color:var(--muted2);font-size:11.5px}
.intel-result p{margin:4px 0 0;font-size:12px}

/* --- classement ----------------------------------------------------------- */
.leaderboard-list{list-style:none;margin:0;padding:0}
.leaderboard-list li{
  display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;
  padding:10px 16px;border-top:1px solid var(--line-soft);font-size:13.5px;
}
.leaderboard-list li:first-child{border-top:0}
.leaderboard-list .rank{color:var(--muted2);font-weight:800;font-variant-numeric:tabular-nums}
.leaderboard-list .who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leaderboard-list .pts{font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.leaderboard-list .is-me{background:rgba(246,185,27,.08)}
.leaderboard-list .is-me .who{color:var(--gold);font-weight:800}
.leaderboard-list .is-me .pts{color:var(--text)}
/* Ma ligne détachée quand je suis hors du Top 20 : le trait pointillé dit
   qu'il y a des rangs entre elle et ce qui précède. */
.leaderboard-list .is-detached{border-top:1px dashed var(--line)}
.leaderboard-empty{text-align:center}
.leaderboard-empty small{display:block;margin-top:4px;color:var(--muted2)}

/* --- résultat de manche --------------------------------------------------- */
.result{padding:20px 16px;border-radius:var(--radius-md);text-align:center;margin-top:14px}
.result-win{border:1px solid rgba(246,185,27,.35);background:rgba(246,185,27,.10)}
.result-lost{border:1px solid var(--line);background:var(--panel2)}
.result-icon{font-size:34px;display:block;margin-bottom:6px}
.result h3{margin:0 0 4px;font-size:17px}
.result-sub{margin:0;color:var(--muted);font-size:13px}
.result-lines{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;font-size:13.5px}
.result-lines .strong{font-weight:800;color:var(--gold)}
.result-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}

/* --- avertissements en ligne ---------------------------------------------- */
.notice{padding:10px 12px;border-radius:var(--radius-sm);font-size:12.5px;line-height:1.5}
.notice-warn{border:1px solid rgba(255,122,26,.35);background:rgba(255,122,26,.10);color:var(--text)}

.badge-warn{background:rgba(255,122,26,.14);color:var(--orange);border-color:rgba(255,122,26,.3)}

@media (max-width:980px){
  .race-list{grid-template-columns:1fr}
}

@media (max-width:600px){
  .race-card{padding:14px}
  .race-prize{font-size:18px}
  /* L'en-tête passe en colonne : côte à côte, le nom de course et le compteur
     de participants se chevauchent sur un téléphone étroit. */
  .race-head{flex-direction:column;gap:6px}
  .race-meta{flex-direction:row;align-items:baseline;gap:8px;text-align:left}
  .leaderboard-list li{grid-template-columns:28px 1fr auto;padding:10px 12px;font-size:13px}
  .race-intel{flex-direction:column;align-items:stretch}
  .race-intel .btn{width:100%}
}

/* ==========================================================================
   MON ÉQUIPE — volume qualifiant et grade (lot 026)

   Réutilise les briques du classement (`.leaderboard-list`) et la barre
   `.bar` : un grade se lit comme une progression, et introduire une seconde
   barre n'apporterait rien qu'une divergence de style à entretenir.
   ========================================================================== */
.team-grade{display:flex;flex-direction:column;gap:10px}
.team-grade-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.team-grade-name{display:inline-flex;align-items:center;gap:8px;font-size:19px;font-weight:800;color:var(--gold)}
.team-grade-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.team-grade-line span{font-size:12.5px;color:var(--muted)}
.team-grade-line b{font-size:13.5px}
/* Dans cette liste, la première colonne porte une icône et non un rang :
   elle doit être centrée, pas alignée comme un nombre. */
.team-grade + .card .leaderboard-list .rank,
.leaderboard-list .rank .icon{display:inline-flex;align-items:center;justify-content:center}

@media (max-width:600px){
  .team-grade-name{font-size:17px}
  .team-grade-head,
  .team-grade-line{flex-direction:column;gap:4px;align-items:flex-start}
}

/* ==========================================================================
   Lot 4.1 — « AfricaPass arrive bientôt »
   ========================================================================== */
.coming-soon{min-height:100vh;display:grid;place-items:center;padding:32px 16px;background:var(--bg)}
.coming-soon-card{max-width:560px;width:100%;text-align:center;display:grid;gap:14px;justify-items:center;
  padding:40px 28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--grad-panel, var(--panel))}
.coming-soon-mark{width:72px;height:72px}
.coming-soon-brand{font-weight:900;letter-spacing:.06em;font-size:18px;margin:0}
.coming-soon-brand span{color:var(--gold)}
.coming-soon h1{font-size:30px;line-height:1.2;margin:4px 0 0}
.coming-soon-lead{color:var(--text);font-size:16px;margin:0}
.coming-soon-note{color:var(--muted);font-size:13.5px;margin:0}
@media (max-width:600px){ .coming-soon h1{font-size:24px} .coming-soon-card{padding:28px 18px} }

/* ======================================================================
   DOCUMENTS JURIDIQUES (B4) — page publique, case de consentement, pied de façade
   ====================================================================== */
.legal-page{min-height:100vh;background:var(--bg);padding:24px 16px 64px}
.legal-nav{max-width:760px;margin:0 auto 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.legal-brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.06em}
.legal-brand b{font-weight:900}
.legal-brand b span{color:var(--gold)}
.legal-back{color:var(--gold);font-size:14px}
.legal-article{max-width:760px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:32px 36px;line-height:1.7}
.legal-article h1{font-size:28px;line-height:1.25;margin:0 0 6px;text-wrap:balance}
.legal-article h2{font-size:20px;margin:26px 0 8px}
.legal-article h3{font-size:17px;margin:20px 0 6px}
.legal-article h4{font-size:15px;margin:16px 0 6px}
.legal-article p{margin:0 0 12px;max-width:72ch}
.legal-article ul{margin:0 0 12px;padding-left:22px}
.legal-meta{color:var(--muted);font-size:13px;margin-bottom:22px !important}
.legal-article .legal-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.legal-list li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel3)}
.legal-list a{color:var(--gold);font-weight:600}
.legal-list small{color:var(--muted)}
.auth-consent .consent-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.55;color:var(--muted);cursor:pointer}
.auth-consent input[type="checkbox"]{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--gold)}
.auth-consent a{color:var(--gold)}
.coming-soon{grid-template-rows:1fr auto;gap:24px}
.coming-soon-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;font-size:13px}
.coming-soon-footer a{color:var(--muted)}
.coming-soon-footer a:hover,.coming-soon-footer a:focus-visible{color:var(--gold)}
@media (max-width:600px){
  .legal-article{padding:22px 18px}
  .legal-article h1{font-size:23px}
}

/* ==========================================================================
   LOT DE CONVERGENCE — cases de déclaration (âge, rétractation), conformité
   ========================================================================== */
.consent-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.55;color:var(--muted);cursor:pointer}
.consent-row input[type="checkbox"]{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--gold)}
.consent-row a{color:var(--gold)}
.waiver-box{display:grid;gap:10px;margin-top:16px}
.waiver-box .waiver-title{font-size:13px;font-weight:700;color:var(--text)}
.compliance-banner{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between}
.compliance-banner p{margin:0;flex:1 1 240px}

/* Lot 039 — tuile d'opérateur sans visuel (Moov, Free) : même gabarit que les autres. */
.pay-card.pay-card-text{display:flex;align-items:center;justify-content:center;background:var(--surface-2, rgba(255,255,255,.04));border:1px solid var(--line);color:var(--text);font-size:15px}