:root {
  --fond: #f4f6f8;
  --carte: #ffffff;
  --texte: #1b1f23;
  --doux: #6a737d;
  --bleu: #0b5394;
  --moi: #d9e8f7;
  --vert: #2e7d32;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #121417;
    --carte: #1e2126;
    --texte: #e6e6e6;
    --doux: #9aa0a6;
    --bleu: #5b9bd5;
    --moi: #1f3a56;
    --vert: #66bb6a;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 16px/1.4 system-ui, sans-serif;
  background: var(--fond);
  color: var(--texte);
  /* Colonne : le bandeau de mise à jour (s'il est là) puis l'écran. */
  display: flex;
  flex-direction: column;
}
section { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: 640px; margin: 0 auto; }
section[hidden] { display: none; }

header { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; background: var(--bleu); color: #fff; }
header h1 { flex: 1; font-size: 1.2rem; margin: 0; }
.etat { font-size: .85rem; opacity: .9; text-align: right; }

#ecran-nom { justify-content: center; padding: 1rem; }
#ecran-nom h1 { text-align: center; color: var(--bleu); }
#form-nom { display: flex; flex-direction: column; gap: .5rem; }
small { color: var(--doux); }

input { font: inherit; padding: .6rem; border: 1px solid var(--doux); border-radius: 6px; background: var(--carte); color: var(--texte); min-width: 0; }
button { font: inherit; padding: .6rem 1rem; border: 0; border-radius: 6px; background: var(--bleu); color: #fff; cursor: pointer; }
button.lien { background: none; color: inherit; padding: .2rem .4rem; }

/* Icônes SVG (voir ICONES dans app.js) : prennent la couleur du texte. */
.icone { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-icone] { display: inline-flex; }
/* Bouton d'en-tête : icône, texte facultatif dessous ; au moins 44×44 px (cible tactile). */
.bouton-icone { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 44px; min-height: 44px; padding: .25rem .4rem; background: none; color: inherit; font-size: .75rem; line-height: 1; }
.bouton-icone .icone { width: 1.4rem; height: 1.4rem; }
footer button.lien, #ecran-nom .langue { color: var(--bleu); }
#ecran-nom .langue { margin-top: 1.5rem; }

.barre { display: flex; gap: .5rem; padding: .5rem 1rem; }
.barre input { flex: 1; }

.liste { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; }
.liste li { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; background: var(--carte); border-bottom: 1px solid var(--fond); cursor: pointer; }
.liste li.vide { justify-content: center; background: none; color: var(--doux); cursor: default; }
.liste .nom { flex: 1; font-weight: 600; min-width: 0; }
.liste .apercu { display: block; font-weight: 400; color: var(--doux); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste .nonlu, .onglet .nonlu { background: var(--bleu); color: #fff; border-radius: 1em; padding: 0 .5em; font-size: .8rem; }
/* Résultats d'une recherche par nom : juste sous la barre, pas extensibles. */
.resultats { flex: none; margin: .5rem 1rem 0; border-radius: 8px; overflow: hidden; }
.resultats:empty { display: none; }

/* Demandes : bandeau « accepter / bloquer » en haut d'une conversation. */
.demande { margin: .5rem 1rem 0; padding: .75rem; border-radius: 8px; background: var(--carte); border: 1px solid var(--doux); font-size: .9rem; }
.demande[hidden], .onglet[hidden] { display: none; }
.demande p { margin: 0 0 .6rem; }
.demande-boutons { display: flex; gap: .5rem; }
.demande-boutons button { flex: 1; min-height: 44px; }
.aide-ecran { margin: .75rem 1rem; color: var(--doux); font-size: .9rem; }
.danger { color: #c62828; border-color: #c62828; }

/* Barre d'onglets en bas : Mesaj, Apèl, Kominote, Pwofil */
.onglets { flex: none; display: flex; width: 100%; max-width: 640px; margin: 0 auto; background: var(--carte); border-top: 1px solid color-mix(in srgb, var(--doux) 30%, transparent); padding-bottom: env(safe-area-inset-bottom); }
.onglets[hidden] { display: none; }
.onglets button { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: .35rem 0; border-radius: 0; background: none; color: var(--doux); font-size: .75rem; }
.onglets button[aria-current="page"] { color: var(--bleu); font-weight: 600; }
.onglets .icone { width: 1.5rem; height: 1.5rem; }
.onglets .badge { position: absolute; top: 4px; left: calc(50% + .45rem); min-width: 1.2rem; padding: 0 .3rem; border-radius: 1rem; background: #c62828; color: #fff; font-size: .7rem; line-height: 1.2rem; font-weight: 600; }
.onglets .badge[hidden] { display: none; }

/* Onglet Apèl */
.liste li > .icone { color: var(--doux); }
.liste li > .icone.manke { color: #c62828; }
.rappel { color: var(--bleu); }

/* Profil : ajouter par Nimewo Sakapfetapp */
.aide-numero { color: var(--texte); font-size: 1rem; line-height: 1.5; }
.form-numero { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.form-numero label { font-weight: 600; }
.barre-numero { display: flex; gap: .5rem; }
.barre-numero input { flex: 1; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.point { width: .6rem; height: .6rem; border-radius: 50%; background: var(--doux); flex: none; }
.point.en-ligne { background: var(--vert); }

footer { padding: .6rem 1rem; color: var(--doux); font-size: .9rem; text-align: center; }

.fil { list-style: none; margin: 0; padding: 1rem; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; }
.fil li { max-width: 80%; padding: .5rem .75rem; border-radius: 10px; background: var(--carte); align-self: flex-start; overflow-wrap: anywhere; white-space: pre-wrap; }
.fil li.moi { align-self: flex-end; background: var(--moi); }
.fil li.vide { align-self: center; background: none; color: var(--doux); }
.fil .info { display: block; font-size: .75rem; color: var(--doux); text-align: right; }
.fil .auteur { display: block; font-size: .85rem; color: var(--bleu); }

.fil li.systeme { align-self: center; background: none; color: var(--doux); font-size: .85rem; }

.appel { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; background: var(--bleu); color: #fff; }
.appel[hidden] { display: none; }
.appel-nom { font-size: 2rem; font-weight: 600; overflow-wrap: anywhere; text-align: center; }
.appel-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }
.appel-boutons button { min-width: 7rem; padding: .9rem 1.2rem; border-radius: 2rem; }
.appel-boutons button[hidden] { display: none; }
.vert { background: #2e7d32; }
.rouge { background: #c62828; }
.gris { background: rgba(255, 255, 255, .2); }
.gris.actif { background: #fff; color: var(--bleu); }

/* Messages vocaux : enregistrement */
.barre [hidden] { display: none; }
.micro-vocal { color: var(--bleu); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.micro-vocal.actif { background: #c62828; color: #fff; border-radius: 50%; }
.annuler { color: #c62828; }
.enreg { flex: 1; display: flex; align-items: center; gap: .5rem; min-width: 0; font-variant-numeric: tabular-nums; }
.enreg .aide { color: var(--doux); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.point-rouge { width: .7rem; height: .7rem; border-radius: 50%; background: #c62828; flex: none; animation: clignote 1s infinite; }
@keyframes clignote { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .point-rouge { animation: none; } }

/* Bandeau « nouvelle version » : au-dessus de l'écran, sans rien recouvrir */
.bandeau-maj { flex: none; border-radius: 0; padding: .8rem 1rem; background: #f9a825; color: #1b1f23; font-weight: 600; text-align: center; }
.bandeau-maj[hidden] { display: none; }
.fil .inconnu { color: var(--doux); }

/* Message d'erreur au-dessus de la barre (micro absent, refusé…) */
.avis { margin: 0 1rem; padding: .6rem .8rem; border-radius: 8px; background: #fdecea; color: #8e1c1c; font-size: .9rem; }
.avis.ok { background: #e8f5e9; color: #1b5e20; }
.avis[hidden] { display: none; }
#avis-liste, #avis-conv { margin-top: .5rem; }
@media (prefers-color-scheme: dark) {
  .avis { background: #4a1f1f; color: #ffd6d6; }
  .avis.ok { background: #1b3a1f; color: #c8e6c9; }
}

/* Identité : nom + code court + badge (vérifié / homonyme) */
.etiquette { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; }
.etiquette .icone { width: 1em; height: 1em; }
.code-court { font-size: .75em; font-weight: 400; opacity: .75; font-variant-numeric: tabular-nums; }
.badge-verifye { color: var(--vert); }
.badge-atansyon { color: #e65100; }
header .badge-verifye { color: #fff; }
header .badge-atansyon { color: #ffcc80; }
.titre-lien { cursor: pointer; min-width: 0; overflow: hidden; }

/* Écrans profil, scanner, contact */
.page { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.page p { margin: 0; }
.page h2 { font-size: 1rem; margin: .5rem 0 0; }
.page .avis { margin: 0; }
.page [hidden] { display: none; }
.profil-nom { font-size: 1.5rem; font-weight: 600; text-align: center; }
.cadre-qr { align-self: center; width: min(72vw, 280px); }
.cadre-qr svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.code-securite { font-family: ui-monospace, monospace; font-size: 1.35rem; letter-spacing: .05em; text-align: center; font-variant-numeric: tabular-nums; }
.large { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; width: 100%; min-height: 44px; }
.secondaire { background: var(--carte); color: var(--bleu); border: 1px solid var(--bleu); }
.video-skane { width: 100%; max-height: 60vh; background: #000; border-radius: 8px; object-fit: cover; }
.statut { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.statut.ok { color: var(--vert); }
.statut.pas-ok { color: #e65100; }

/* Messages vocaux : lecture */
.lecteur { display: flex; align-items: center; gap: .5rem; min-width: 12rem; }
.lecteur .bouton-icone { color: var(--bleu); }
.lecteur .progression { flex: 1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--doux) 35%, transparent); overflow: hidden; }
.lecteur .progression span { display: block; height: 100%; background: var(--bleu); }
.lecteur .duree { font-size: .85rem; color: var(--doux); font-variant-numeric: tabular-nums; }

.onglet { display: flex; align-items: center; justify-content: space-between; margin: .5rem 1rem 0; background: var(--carte); color: var(--texte); font-weight: 600; border: 1px solid var(--bleu); }