/* ==========================================================================
   PLENIPAY - Charte graphique unique (admin + espace membre)
   Chargee en DERNIER dans le <head> : retablit le theme applicatif apres
   plenisofts-theme.css (qui impose html,body { color:#fff; fond sombre }).
   Ne rien mettre ici qui soit specifique a une seule page.
   ========================================================================== */
:root{
  --pp-primary:#1a56db;
  --pp-primary-dark:#1239a5;
  --pp-accent:#ff6b35;
  --pp-success:#059669;
  --pp-warning:#d97706;
  --pp-danger:#dc2626;
  --pp-info:#0284c7;

  --pp-ink:#0f172a;
  --pp-ink-2:#334155;
  --pp-ink-muted:#64748b;

  --pp-surface:#ffffff;
  --pp-surface-2:#f8fafc;
  --pp-bg:#f1f5f9;
  --pp-border:#e2e8f0;

  --pp-radius:14px;
  --pp-radius-sm:10px;
  --pp-shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
}

/* --- 1. Surface applicative claire, encre sombre ------------------------ */
html{ background:var(--pp-bg); }
body.pp-app{
  background:var(--pp-bg) !important;
  background-image:none !important;
  background-attachment:scroll !important;
  color:var(--pp-ink) !important;
  font-family:'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* --- 2. Textes secondaires lisibles ------------------------------------- */
body.pp-app .text-muted{ color:var(--pp-ink-muted) !important; }
body.pp-app .form-text,
body.pp-app .small.text-secondary,
body.pp-app .text-secondary{ color:var(--pp-ink-muted) !important; }

/* --- 3. Surfaces claires : toujours de l encre sombre ------------------- */
body.pp-app .card,
body.pp-app .card-body,
body.pp-app .card-footer,
body.pp-app .list-group-item,
body.pp-app .dropdown-menu,
body.pp-app .modal-body,
body.pp-app .modal-footer,
body.pp-app .accordion-body,
body.pp-app .bg-white,
body.pp-app .bg-light,
body.pp-app .alert-light{ color:var(--pp-ink); }

body.pp-app .card{
  background:var(--pp-surface);
  border:1px solid var(--pp-border);
  border-radius:var(--pp-radius);
  box-shadow:var(--pp-shadow);
}
body.pp-app .card-header{
  background:var(--pp-surface);
  border-bottom:1px solid var(--pp-border);
  color:var(--pp-ink);
  font-weight:600;
}

/* --- 4. Tableaux -------------------------------------------------------- */
body.pp-app .table{ color:var(--pp-ink); }
body.pp-app .table > :not(caption) > * > *{ color:inherit; }
body.pp-app .table > thead th{
  color:var(--pp-ink-muted);
  font-size:.74rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:700;
  border-bottom:1px solid var(--pp-border);
}

/* --- 5. Formulaires ----------------------------------------------------- */
body.pp-app label,
body.pp-app .form-label,
body.pp-app .col-form-label,
body.pp-app .form-check-label,
body.pp-app legend{ color:var(--pp-ink); }
body.pp-app .form-control,
body.pp-app .form-select,
body.pp-app textarea{
  color:var(--pp-ink);
  background:var(--pp-surface);
  border:1px solid var(--pp-border);
  border-radius:var(--pp-radius-sm);
}
body.pp-app .form-control::placeholder,
body.pp-app textarea::placeholder{ color:#94a3b8; }
body.pp-app .form-control:focus,
body.pp-app .form-select:focus{
  border-color:var(--pp-primary);
  box-shadow:0 0 0 .2rem rgba(26,86,219,.15);
}
body.pp-app .input-group-text{
  color:var(--pp-ink);
  background:var(--pp-surface-2);
  border:1px solid var(--pp-border);
}

/* --- 6. Encarts d information (fond clair, texte sombre) ---------------- */
body.pp-app #methodInfo,
body.pp-app .pp-note,
body.pp-app .info-box{ color:var(--pp-ink) !important; }

/* --- 7. Zones volontairement sombres ou colorees ------------------------ */
/* Elles portent leur propre couleur : on ne les touche pas. Ce bloc sert
   uniquement a garantir que les libelles blancs le restent. */
body.pp-app .text-white,
body.pp-app .text-white *,
body.pp-app .btn.text-white,
body.pp-app .badge.text-white{ color:#fff !important; }

/* --- 8. Ecrans d authentification : identite visuelle sombre assumee ---- */
body.pp-app.pp-auth{
  color:#f8fafc !important;
  background:
    radial-gradient(ellipse at top left, rgba(122,9,91,.45) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(20,71,69,.4) 0%, transparent 55%),
    linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, var(--pp-primary) 100%) !important;
  background-attachment:fixed !important;
}
body.pp-app.pp-auth .card,
body.pp-app.pp-auth .card-body,
body.pp-app.pp-auth .card-header{ color:var(--pp-ink); }

/* --- 9. Boutons : rayon et graisse homogenes ---------------------------- */
body.pp-app .btn{ border-radius:var(--pp-radius-sm); font-weight:600; }
body.pp-app .badge{ font-weight:600; letter-spacing:.01em; }

/* --- 10. Cartes de moyen de paiement / reception -----------------------
   Le gabarit d origine impose height:90px : les sous-titres longs
   (Orange - MTN - Moov - Wave - M-PESA, Momentanement indisponible)
   debordaient de la carte. On passe en hauteur elastique, les cartes
   d une meme ligne restant alignees grace au grid (stretch par defaut). */
body.pp-app .pay-method{ display:flex; }
body.pp-app .pay-method > label{
  height:100% !important;
  min-height:92px;
  width:100%;
  padding:12px 8px;
  gap:4px;
  overflow:hidden;
  overflow-wrap:anywhere;
}
body.pp-app .pay-method > label .sub{
  font-size:.63rem;
  line-height:1.2;
  margin-top:0;
  max-width:100%;
  display:block;
}
body.pp-app .pay-method > label i{ line-height:1; }

@media (max-width:575.98px){
  body.pp-app .pay-method > label{ min-height:98px; font-size:.74rem; padding:10px 6px; }
  body.pp-app .pay-method > label .sub{ font-size:.58rem; }
  body.pp-app .pay-method > label i{ font-size:1.3rem !important; }
}

/* --- 11. Garde-fous responsives generaux -------------------------------- */
body.pp-app{ overflow-x:hidden; }
body.pp-app img, body.pp-app svg{ max-width:100%; height:auto; }
body.pp-app .table-responsive{ -webkit-overflow-scrolling:touch; }
@media (max-width:575.98px){
  body.pp-app .card-body{ padding:1rem .85rem; }
  body.pp-app h1,body.pp-app .h1{ font-size:1.45rem; }
  body.pp-app h2,body.pp-app .h2{ font-size:1.25rem; }
  body.pp-app h3,body.pp-app .h3{ font-size:1.1rem; }
  body.pp-app .btn{ padding-top:.55rem; padding-bottom:.55rem; }
  body.pp-app .form-control,
  body.pp-app .form-select{ font-size:16px; }  /* evite le zoom auto iOS */
}