/* ============================================================
   FIVE SARL × Airtel — Simulation paiement
   Palette FIVE: rouge pâle (#E24B4A) + Airtel rouge (#E60012)
   Font: Manrope (UI), JetBrains Mono (mono)
   ============================================================ */
:root {
  --five-primary: #E24B4A;
  --five-dark:    #A32D2D;
  --five-soft:    #FCEBEB;
  --five-ink:     #501313;
  --five-body:    #6b3232;
  --airtel-red:   #E60012;
  --airtel-deep:  #B3000E;
  --canvas:       #FFFFFF;
  --canvas-soft:  #FDF5F5;
  --line:         rgba(163,45,45,.12);
  --shadow-sm:    0 2px 8px rgba(163,45,45,.06);
  --shadow-md:    0 8px 30px rgba(163,45,45,.10);
  --radius:       16px;
}

*,*::before,*::after { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: linear-gradient(180deg, var(--canvas) 0%, var(--canvas-soft) 100%);
  color: var(--five-ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Bandeau démo permanent */
.demo-banner {
  position: sticky; top: 0; z-index: 50;
  background: #1a1a1a;
  color: #fff;
  padding: 10px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  border-bottom: 2px solid var(--airtel-red);
}
.demo-banner .dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background: var(--airtel-red); margin-right:8px;
  animation: pulse 1.4s infinite;
}
@keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

.container { max-width: 920px; margin: 0 auto; padding: 24px 16px 80px; }

/* Header marque */
.brand {
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 0;
}
.brand-left { display:flex; align-items:center; gap:10px; }
.brand-logo {
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(135deg, var(--five-primary), var(--five-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:18px;
}
.brand-name { font-weight:800; font-size:18px; color: var(--five-ink); }
.brand-sub  { font-size:12px; color: var(--five-body); }

/* Titres */
h1.page-title { font-size: 28px; margin: 8px 0 4px; color: var(--five-ink); font-weight: 800; }
.page-lead { color: var(--five-body); margin: 0 0 24px; font-size: 15px; }

/* Cards packs */
.packs { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
@media (max-width: 760px) { .packs { grid-template-columns: 1fr; } }
.pack {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px; box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; gap:12px;
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
}
.pack:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pack.featured {
  border: 2px solid var(--five-primary);
  background: linear-gradient(180deg, #fff, #fff8f8);
}
.pack-badge {
  position:absolute; top:-12px; right:18px;
  background: var(--five-primary); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.5px;
  padding: 6px 12px; border-radius: 999px;
}
.pack-name { font-size:18px; font-weight:800; color: var(--five-ink); }
.pack-desc { font-size: 13px; color: var(--five-body); min-height: 36px; }
.pack-price { font-size: 32px; font-weight: 800; color: var(--five-primary); }
.pack-price small { font-size:13px; font-weight:600; color: var(--five-body); }
.pack-duree { font-size: 13px; color: var(--five-body); }
.pack .btn { margin-top: auto; }

/* Boutons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  background: var(--five-primary); color:#fff; border:none;
  font-family: inherit; font-weight: 700; font-size: 15px;
  padding: 14px 18px; border-radius: 12px; cursor: pointer;
  transition: background .12s ease, transform .08s ease;
}
.btn:hover { background: var(--five-dark); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-airtel {
  background: var(--airtel-red);
  box-shadow: 0 4px 14px rgba(230,0,18,.30);
}
.btn-airtel:hover { background: var(--airtel-deep); }
.btn-ghost {
  background: #fff; color: var(--five-ink); border: 1px solid var(--line);
}

/* Formulaires */
.form-card {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow-md);
}
.field { display:flex; flex-direction:column; gap:6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight:600; color: var(--five-ink); }
.field input {
  font-family: inherit; font-size: 16px; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--line);
  background:#fff; color: var(--five-ink); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus {
  border-color: var(--airtel-red);
  box-shadow: 0 0 0 3px rgba(230,0,18,.12);
}
.field .hint { font-size: 12px; color: var(--five-body); }

/* Logo Airtel header */
.airtel-header {
  display:flex; align-items:center; gap:12px;
  padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(135deg, var(--airtel-red), var(--airtel-deep));
  color: #fff; margin-bottom: 18px;
}
.airtel-logo {
  width:44px; height:44px; border-radius:10px; background:#fff; color: var(--airtel-red);
  font-weight:900; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  letter-spacing:-.5px;
}
.airtel-title { font-weight:800; font-size:16px; }
.airtel-sub { font-size:12px; opacity:.9; }

/* PIN input */
.pin-grid {
  display:flex; gap:10px; justify-content:center; margin: 18px 0;
}
.pin-grid input {
  width: 56px; height: 64px; text-align: center;
  font-size: 28px; font-weight: 800; font-family: 'JetBrains Mono', monospace;
  border: 2px solid var(--line); border-radius: 12px;
  background:#fff; color: var(--five-ink);
}
.pin-grid input:focus {
  border-color: var(--airtel-red);
  box-shadow: 0 0 0 3px rgba(230,0,18,.12);
  outline: none;
}

/* Loader / spinner */
.loader-block {
  display:none; text-align:center; padding: 18px 0;
}
.loader-block.show { display:block; }
.spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(230,0,18,.15);
  border-top-color: var(--airtel-red);
  animation: spin .8s linear infinite; margin: 0 auto 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Succès */
.success-icon {
  width:84px; height:84px; border-radius:50%;
  background: linear-gradient(135deg, #38c172, #2f9b5e);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size: 48px; margin: 0 auto 14px;
  box-shadow: 0 8px 24px rgba(56,193,114,.30);
}
.recap { background:#fff; border:1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.recap-row { display:flex; justify-content:space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size:14px; }
.recap-row:last-child { border-bottom: none; }
.recap-row .k { color: var(--five-body); }
.recap-row .v { font-weight: 700; color: var(--five-ink); }

/* Tableau répartition */
.split-table {
  margin-top: 18px;
  display:grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.split-cell {
  border-radius: 12px; padding: 16px; text-align:center;
}
.split-cell.five { background: #fcebeb; color: var(--five-ink); }
.split-cell.airtel { background: #fff0f1; color: var(--airtel-deep); }
.split-cell .pct { font-size: 13px; font-weight: 700; opacity:.8; }
.split-cell .val { font-size: 22px; font-weight: 800; margin: 4px 0 2px; }
.split-cell .lbl { font-size: 12px; opacity: .75; }

/* Footer demo */
.demo-footnote {
  margin-top: 26px; text-align:center; font-size: 12px; color: var(--five-body);
  background: #fff7f7; border: 1px dashed var(--five-primary);
  border-radius: 10px; padding: 12px;
}