/* ══════════════════════════════════════════════════════════════════════════
   ev-espace-client-v340.css — lisibilite de l'espace client (2026-09-05)
   MARQUEUR_LISIBILITE_ESPACE_CLIENT_20260905

   Constate en parcourant l'espace client ecran par ecran sur un telephone de
   390 px, contrastes mesures :
     · « Depensez 10 DH » ... « Depensez 500 DH » : 1,10:1 — texte quasi blanc
       sur fond blanc, invisible. Le client ne voyait que « Gagnez +10 DH ».
     · Carte « Validation de facture » : titre 2,56:1, case a cocher 1,48:1.
       C'est la carte anti-fraude que le client DOIT lire avant de valider.
     · Rappel du Reglement Interieur : 1,91:1 — brun fonce sur bleu nuit.
     · En-tete mobile : 445 px de contenu dans 390 px, le bouton de deconnexion
       et le selecteur de langue sortaient de l'ecran.

   Cause commune : ces blocs ont ete ecrits pour un espace client CLAIR ; le
   passage au theme sombre a repeint les fonds sans repeindre ces textes-la,
   qui etaient figes en dur. On les remet sur les jetons de theme, en ciblant
   uniquement l'espace client (#mb-app) pour ne toucher a aucun ecran du staff.
   Charger EN DERNIER dans index.html.
══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Texte lisible sur toute surface « inverse » de l'espace client ──── */
#mb-app [style*="var(--ev-sinv)"],
#mb-app [style*="var(--ev-sinv)"] * {
  color: var(--ev-tinv) !important;
  -webkit-text-fill-color: var(--ev-tinv) !important;
}
/* Les pastilles de gain gardent leur vert : elles portent leur propre fond. */
#mb-app [style*="#ecfdf5"],
#mb-app [style*="#ECFDF5"],
#mb-app [style*="#D1FAE5"],
#mb-app [style*="#d1fae5"] {
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
}

/* ── 2. Rappel du Reglement Interieur ───────────────────────────────────── */
#mb-app [style*="#FFF7ED"] { background: var(--ev-s1) !important; border-color: var(--ev-b2) !important; }
#mb-app [style*="#9A3412"] { color: var(--ev-t0) !important; -webkit-text-fill-color: var(--ev-t0) !important; }
#mb-app [style*="#7C2D12"] { color: var(--ev-t1) !important; -webkit-text-fill-color: var(--ev-t1) !important; }
#mb-app [style*="#C2410C"] { color: #F59E0B !important; -webkit-text-fill-color: #F59E0B !important; }

/* ── 3. En-tete mobile : tenir dans la largeur du telephone ─────────────── */
#mb-mobile-header { min-width: 0; }
#mb-mobile-header > div:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#mb-mobile-header .lang-picker { min-width: 0; flex-shrink: 1; }
@media (max-width: 430px) {
  /* Le pictogramme et l'etiquette accessible suffisent : le mot « Deconnexion »
     poussait 85 px de contenu hors de l'ecran. */
  #mb-mobile-header button[onclick*="doLogout"] [data-i18n="account.logout"] { display: none; }
  #mb-mobile-header .lang-picker button { padding-left: 6px; padding-right: 6px; }
}

/* ── 4. Confort de lecture general de l'espace client ───────────────────── */
#mb-app .scrl { overscroll-behavior-y: contain; }
/* ── Tableau des mouvements du portefeuille ─────────────────────────────
   Quatre colonnes (Date, Type, Details, Montant) ne tiennent pas dans 390 px :
   « Details » et « Montant » sortaient de l'ecran — le client ne voyait donc
   PAS les montants de son propre portefeuille. Sur telephone, chaque mouvement
   devient une ligne : date, nature et libelle a gauche, montant a droite. */
#mb-app table { width: 100%; max-width: 100%; }
@media (max-width: 600px) {
  /* Le tableau porte min-width:520px en dur : c est ce qui le poussait hors
     de l ecran, montants compris. En mode liste il n en a plus besoin. */
  #mb-app table { min-width: 0 !important; }
  #mb-app table thead { display: none; }
  #mb-app table, #mb-app table tbody, #mb-app table tr, #mb-app table td { display: block; width: auto; }
  #mb-app table tr {
    display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 2px;
    align-items: baseline; padding: 12px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
  }
  #mb-app table td { border: 0 !important; padding: 0 !important; text-align: left !important; white-space: normal !important; }
  #mb-app table td:nth-child(1) { grid-column: 1; font-size: 11px; opacity: .7; }
  #mb-app table td:nth-child(2) { grid-column: 1; }
  #mb-app table td:nth-child(3) { grid-column: 1; font-size: 12px; }
  #mb-app table td:nth-child(4) { grid-column: 2; grid-row: 1 / span 3; align-self: center; text-align: right !important; font-size: 15px; }
  /* Les lignes pleine largeur (etat vide, « voir les autres ») gardent leur place. */
  #mb-app table td[colspan] { grid-column: 1 / -1; grid-row: auto; text-align: center !important; }
}

/* ── Choix de la langue : ne pas retourner ce qui reste en français ──────
   L espace client connecte n est traduit qu a 3 %. Passer en arabe retournait
   pourtant toute sa mise en page : le texte francais s affichait a l envers et,
   plus grave, les MONTANTS etaient abimes sur l ecran de paiement — « DH 44.00 »
   au lieu de « 44.00 DH », « DH 6.00+ » au lieu de « +6.00 DH », et les points
   en debut de ligne. Tant que le contenu est en francais, sa mise en page le
   reste aussi. L ecran d accueil public, lui, EST traduit : il garde le RTL.
   MARQUEUR_RTL_SANS_DEGATS_20260905 */
html[dir="rtl"] #mb-p-app,
html[dir="rtl"] #mb-mobile-header,
html[dir="rtl"] #ev-push-invite,
html[dir="rtl"] #mb-toast,
html[dir="rtl"] #mb-rules-gate { direction: ltr; text-align: left; }
html[dir="rtl"] #mb-p-app [dir="rtl"], html[dir="rtl"] #mb-p-app [lang="ar"] { direction: rtl; text-align: right; }