/* ═══ Charte Tatbiki : 3 couleurs seulement — JAUNE, NOIR, GRIS (+ blanc neutre) ═══
   Jaune repris de tatbiki.pro (tailwind brand.yellow). Jamais de texte blanc sur jaune. */
:root {
  --tatbiki-jaune: #FFCC00;
  --noir: #0F0F0F;
  --gris-fonce: #3A3A3A;
  --gris-clair: #EDEDED;
  --blanc: #FFFFFF;
  /* Exceptions : danger/alerte uniquement, et WhatsApp uniquement */
  --danger: #C62828;
  --alerte: #F57C00;
  --whatsapp: #25D366;

  /* Rôles (mode clair) */
  --fond: #F5F5F5;
  --surface: var(--blanc);
  --texte: var(--noir);
  --texte2: #4D4D4D;
  --bord: #D0D0D0;
  --focus: var(--noir);
  --entete-fond: #000000;
  --entete-surface: #1A1A1A;
  --rayon: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: var(--noir);
    --surface: #1A1A1A;
    --texte: #F5F5F5;
    --texte2: #B3B3B3;
    --bord: #383838;
    --focus: var(--gris-clair);
    --entete-fond: #000000;
    --entete-surface: #262626;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, sans-serif;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
[hidden] { display: none !important; }
.ecran { max-width: 480px; margin: 0 auto; padding: 16px 16px 40px; }
.centre { padding-top: 6vh; }
.logo { font-size: 56px; text-align: center; }
h1 { font-size: 1.6rem; margin: .2em 0; }
.centre h1 { text-align: center; }
.sous { color: var(--texte2); text-align: center; margin: 0 0 24px; }
.note { color: var(--texte2); font-size: .92rem; text-align: center; margin-top: 20px; }
label, .label { display: block; font-weight: 700; margin: 18px 0 6px; }
input {
  width: 100%; font: inherit; font-size: 1.2rem; padding: 14px; border-radius: var(--rayon);
  border: 2px solid var(--bord); background: var(--surface); color: var(--texte);
}
input::placeholder { color: var(--texte2); opacity: .8; }
input:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.champ-code { font-size: 2rem; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.champ-montant { font-size: 2.4rem; font-weight: 800; text-align: center; }

/* Erreurs : rouge danger (texte rouge foncé sur gris clair + barre rouge + ⚠️) */
.erreur { margin: 10px 0 0; font-weight: 700; color: var(--danger); }
.erreur:not(:empty) {
  background: var(--gris-clair); border-inline-start: 6px solid var(--danger);
  border-radius: 10px; padding: 10px 12px;
}
.erreur:not(:empty)::before { content: "⚠️ "; }

/* Boutons */
.btn {
  display: block; width: 100%; min-height: 56px; margin-top: 14px; padding: 14px 18px;
  font: inherit; font-weight: 800; font-size: 1.1rem; border-radius: var(--rayon);
  border: 2px solid transparent; cursor: pointer; touch-action: manipulation;
}
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, .filtre:focus-visible, .rub:focus-visible, .langue:focus-visible, .ligne:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Jaune réservé : bouton photo + bandeau d'annonce. Ailleurs : gris clair. */
.btn { background-clip: padding-box; }
.btn-principal { background: var(--gris-clair); color: var(--noir); border-color: var(--noir); }
/* Contour net : le NOIR est peint jusqu'au bord extérieur (border-box), le JAUNE seulement à l'intérieur (padding-box).
   Aucun pixel jaune ne peut sortir du contour, même sur écran haute définition. */
.statut.essai, .statut.actif {
  border: 3px solid transparent;
  background: linear-gradient(var(--tatbiki-jaune), var(--tatbiki-jaune)) padding-box, var(--noir) border-box;
  color: var(--noir);
}
/* Bouton photo : gris foncé, texte blanc. Saisie rapide : gris un peu plus clair, texte blanc. */
.btn-photo { background: #5C5C5C; color: var(--blanc); border: none; }
#btn-saisie { background: #757575; color: var(--blanc); border: none; }
.btn-photo { min-height: 84px; font-size: 1.35rem; }
.btn-secondaire { background: var(--surface); color: var(--texte); border-color: var(--texte); }
.btn-lien { background: none; color: var(--texte); min-height: 48px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.btn-danger { background: var(--danger); color: var(--blanc); border-color: var(--danger); }
.btn-danger-lien { background: var(--surface); color: var(--danger); border-color: var(--danger); }
@media (prefers-color-scheme: dark) {
  .btn-danger-lien { background: var(--gris-clair); }
}

/* En-tête noir, texte jaune/blanc */
.barre {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: -16px -16px 14px; padding: 12px 16px; background: var(--entete-fond); color: var(--blanc);
}
.barre h1 { flex: 1; margin: 0; color: var(--gris-clair); }
.btn-icone {
  min-width: 48px; min-height: 48px; font-size: 1.5rem; border: none; border-radius: 12px;
  background: var(--entete-surface); color: var(--gris-clair); cursor: pointer;
}

/* Bandeau de statut */
.statut { border-radius: var(--rayon); padding: 12px 14px; font-weight: 800; margin-bottom: 12px; border: 2px solid var(--noir); }
.statut.expire { background: var(--danger); color: var(--blanc); border-color: var(--danger); }
.statut.expire::before { content: "⚠️ "; }
.statut .btn { margin-top: 10px; background: var(--blanc); color: var(--danger); border-color: var(--blanc); }
@media (prefers-color-scheme: dark) { .statut.expire { border-color: var(--danger); } }
/* Alerte (orange) : réservée aux dépassements de budget (phase à venir) */
.alerte { background: var(--alerte); color: var(--noir); border-radius: var(--rayon); padding: 12px 14px; font-weight: 800; }
.alerte::before { content: "⚠️ "; }

/* Cartes de totaux */
.cartes { display: grid; grid-template-columns: 1fr; gap: 10px; }
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px 14px; }
.carte h2 { font-size: .95rem; margin: 0; color: var(--texte2); font-weight: 700; }
.carte .total { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.repart { display: flex; gap: 8px; flex-wrap: wrap; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (min-width: 400px) {
  .cartes { grid-template-columns: 1fr 1fr; }
  #carte-jour { grid-column: 1 / -1; }
}

/* Badges : PERSO = gris foncé, PRO = jaune texte noir */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .85rem; font-weight: 800; }
.badge.perso { background: var(--gris-fonce); color: var(--blanc); }
.badge.pro { background: var(--gris-clair); color: var(--noir); box-shadow: inset 0 0 0 1px var(--texte2); }
@media (prefers-color-scheme: dark) { .badge.perso { background: #555555; } }

/* Filtres */
.filtres { display: flex; gap: 8px; margin: 22px 0 10px; }
.filtre {
  flex: 1; min-height: 46px; font: inherit; font-weight: 800; border-radius: 999px;
  border: 2px solid var(--bord); background: var(--surface); color: var(--texte); cursor: pointer;
}
.filtre.actif { background: var(--noir); color: var(--gris-clair); border-color: var(--noir); }
@media (prefers-color-scheme: dark) { .filtre.actif { background: var(--gris-clair); color: var(--noir); border-color: var(--gris-clair); } }

/* Liste */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { margin-bottom: 8px; }
.ligne {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: start;
  background: var(--surface); color: var(--texte); border: 1px solid var(--bord); border-radius: var(--rayon);
  font: inherit; cursor: pointer; min-height: 64px;
}
.ligne .ico { font-size: 1.6rem; }
.ligne .milieu { flex: 1; min-width: 0; }
.ligne .lib { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ligne .meta { color: var(--texte2); font-size: .9rem; display: flex; gap: 8px; align-items: center; }
.ligne .mt { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vide { color: var(--texte2); text-align: center; padding: 24px 0; }

/* Grille des rubriques */
#rubriques h3 { display: inline-block; font-size: .9rem; font-weight: 800; margin: 14px 0 8px; padding: 2px 12px; border-radius: 999px; }
#rubriques h3.perso { background: var(--gris-fonce); color: var(--blanc); }
#rubriques h3.pro { background: var(--gris-clair); color: var(--noir); box-shadow: inset 0 0 0 1px var(--texte2); }
.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rub {
  min-height: 84px; padding: 8px 4px; border-radius: var(--rayon); border: 2px solid var(--bord);
  background: var(--surface); color: var(--texte); font: inherit; font-size: .82rem; font-weight: 700;
  line-height: 1.2; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.rub .e { font-size: 1.6rem; }
.rub.choisie { border-color: var(--noir); outline: 3px solid var(--noir); }
.rub.choisie.perso { background: var(--gris-fonce); color: var(--blanc); }
.rub.choisie.pro { background: var(--gris-clair); color: var(--noir); }
@media (prefers-color-scheme: dark) { .rub.choisie { border-color: var(--gris-clair); outline-color: var(--gris-clair); } }

/* Confirmation de suppression */
.confirm { background: var(--surface); border: 2px solid var(--danger); border-radius: var(--rayon); padding: 14px; margin-top: 14px; }
.confirm p { margin: 0; font-weight: 800; color: var(--danger); }
@media (prefers-color-scheme: dark) { .confirm { background: var(--gris-clair); } }
.confirm p::before { content: "⚠️ "; }
.ligne-btns { display: flex; gap: 10px; }
.ligne-btns .btn { flex: 1; }

/* Menu : noir, texte blanc/jaune */
.panneau { position: fixed; inset: 0; z-index: 20; }
.panneau-fond { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.panneau-contenu {
  position: absolute; top: 0; bottom: 0; right: 0; width: min(86vw, 340px); overflow-y: auto;
  background: var(--entete-fond); color: var(--blanc); border-left: 4px solid var(--gris-clair);
  padding: calc(14px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
  animation: tiroir .22s ease-out;
}
@keyframes tiroir { from { transform: translateX(100%); } to { transform: translateX(0); } }
.panneau-fond { animation: fondu .22s ease-out; }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
.menu-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.menu-tete h2 { margin: 0; }
.menu-lien {
  display: block; width: 100%; min-height: 54px; margin-top: 8px; padding: 12px 14px; text-align: start;
  font: inherit; font-weight: 800; font-size: 1.1rem; border-radius: var(--rayon);
  background: var(--entete-surface); color: var(--blanc); border: 2px solid #444444; cursor: pointer;
}
.panneau hr { border: none; border-top: 1px solid #444444; margin: 18px 0 12px; }
.panneau-contenu h2 { margin-top: 0; color: var(--gris-clair); }
.panneau-contenu b { color: var(--gris-clair); }
.panneau .btn-secondaire { background: var(--entete-surface); color: var(--blanc); border-color: #555555; }
.panneau .btn-lien { color: var(--blanc); }

/* Toast */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 30;
  max-width: 448px; margin: 0 auto; background: var(--noir); color: var(--blanc); border: 2px solid var(--gris-clair);
  padding: 14px 16px; border-radius: var(--rayon); font-weight: 800; text-align: center;
}

/* ── Langues + arabe (droite à gauche) ── */
.zone-langues .langues { display: flex; gap: 6px; justify-content: center; margin-bottom: 4px; }
.langue {
  flex: 1; max-width: 140px; min-height: 44px; font: inherit; font-weight: 800; font-size: .95rem;
  border-radius: 999px; border: 2px solid var(--bord); background: var(--surface); color: var(--texte); cursor: pointer;
}
.langue.actif { background: var(--gris-clair); color: var(--noir); border-color: var(--noir); border-width: 3px; }
.panneau .zone-langues .langues { justify-content: stretch; }
.panneau .langue { max-width: none; background: var(--entete-surface); color: var(--blanc); border-color: #555555; }
.panneau .langue.actif { background: var(--gris-clair); color: var(--noir); border-color: var(--gris-clair); }
[dir="rtl"] body { line-height: 1.6; }
[dir="rtl"] .fleche { transform: scaleX(-1); }
[dir="rtl"] .rub { font-size: .9rem; }
.mt, .total, .repart .badge, #menu-tel { unicode-bidi: isolate; }
/* Arabe : le texte d'exemple (placeholder) s'affiche de droite à gauche ; la saisie reste en chiffres LTR */
[dir="rtl"] #tel:placeholder-shown, [dir="rtl"] #libelle:placeholder-shown { direction: rtl; }

/* WhatsApp : vert réservé à ce qui concerne WhatsApp (texte noir sur vert, lisible) */
.whatsapp {
  display: block; width: fit-content; margin: 20px auto 0; padding: 8px 14px; border-radius: 999px;
  background: var(--whatsapp); color: var(--noir); font-weight: 700; font-size: .92rem; text-align: center;
}

/* Bandeau d'annonce : défilement continu de gauche à droite, sans vide */
.statut { overflow: hidden; isolation: isolate; }
.statut .defile { border-radius: 8px; }
.defile { overflow: hidden; width: 100%; direction: ltr; }
.piste { display: flex; width: max-content; direction: ltr; animation: defile var(--duree, 12s) linear infinite; }
.piste .item { flex: none; white-space: nowrap; padding-inline: 1.2em; }
.piste .item::after { content: "•"; padding-inline-start: 2.4em; opacity: .6; }
@keyframes defile { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Bandeau défilant : le texte glisse jusqu'au contour (pas de marge où il serait coupé net) */
.statut.essai, .statut.actif { padding-inline: 0; }
.statut .defile { border-radius: 10px; }

/* En-tête accueil : logo Tatbiki à gauche, « Dépenses » au centre, menu à droite (même ordre en arabe) */
.barre-accueil { display: grid; grid-template-columns: 1fr auto 1fr; direction: ltr; }
.barre-accueil .logo-tatbiki { justify-self: start; height: 40px; width: auto; display: block; }
.barre-accueil h1 { text-align: center; flex: none; }
.barre-accueil #btn-menu { justify-self: end; }

/* Filtre du détail : rubrique + nature */
.filtres-detail { margin: 0 0 10px; }
.select {
  width: 100%; min-height: 50px; font: inherit; font-weight: 700; padding: 10px 12px; border-radius: var(--rayon);
  border: 2px solid var(--bord); background: var(--surface); color: var(--texte);
}
.select:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.natures { display: flex; gap: 6px; margin-top: 8px; }
.nature {
  flex: 1; min-height: 42px; font: inherit; font-weight: 800; font-size: .95rem; border-radius: 10px;
  border: 2px solid var(--bord); background: var(--surface); color: var(--texte); cursor: pointer;
}
.nature.actif { background: var(--gris-fonce); color: var(--blanc); border-color: var(--gris-fonce); }
@media (prefers-color-scheme: dark) { .nature.actif { background: var(--gris-clair); color: var(--noir); border-color: var(--gris-clair); } }
.filtre-resume {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--gris-clair); color: var(--noir); font-weight: 800;
}
.btn-effacer { font: inherit; font-weight: 700; font-size: .9rem; background: none; border: none; color: var(--noir); text-decoration: underline; cursor: pointer; min-height: 40px; }

/* Écran « Par rubrique » */
.resume-rub { margin-bottom: 4px; }
#rub-nature { margin: 10px 0 12px; }
.ligne-rub .meta { flex-wrap: wrap; }
.barre-rub { display: block; height: 8px; margin-top: 6px; border-radius: 999px; background: var(--gris-clair); overflow: hidden; }
.barre-rub-pleine { display: block; height: 100%; border-radius: 999px; background: var(--gris-fonce); }
.barre-rub-pleine.pro { background: #8A8A8A; }
@media (prefers-color-scheme: dark) { .barre-rub { background: #333333; } .barre-rub-pleine { background: var(--gris-clair); } .barre-rub-pleine.pro { background: #9A9A9A; } }