/* FOOTPASS Messenger v2 · États système + écran À propos + galerie
   Ajout câblé dans l'existant · s'appuie sur le vocabulaire pg-* / hm-* et les tokens --acc.
   Clair (.hm.light …) et sombre. Cibles ≥ 44 px, focus visibles, prefers-reduced-motion. */

/* ═══════════════════════════════════════════════════════
   1. COMPOSANT D'ÉTAT RÉUTILISABLE · FPState
   icône + titre + sous-texte + action · décliné par contexte
   ═══════════════════════════════════════════════════════ */
.fp-state {
  margin: auto; width: 100%; max-width: 284px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 30px 6px;
}
.fp-state-ic {
  width: 64px; height: 64px; border-radius: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); color: #C7C7CF;
}
.hm.light .fp-state-ic { background: rgba(15,15,16,0.05); color: #6B6B73; }
/* Tons : accent (constructif) · ambre (attente) · rouge (erreur) · or (coffre) */
.fp-state-ic.t-accent { background: color-mix(in srgb, var(--acc, #00A37E) 13%, transparent); color: var(--acc-bright, #00C49A); }
.hm.light .fp-state-ic.t-accent { background: color-mix(in srgb, var(--acc, #00A37E) 10%, #fff); color: var(--acc, #00A37E); }
.fp-state-ic.t-warn { background: rgba(226,178,72,0.14); color: #E2B248; }
.hm.light .fp-state-ic.t-warn { background: rgba(226,178,72,0.16); color: #A0761A; }
.fp-state-ic.t-danger { background: rgba(242,109,109,0.12); color: #F26D6D; }
.hm.light .fp-state-ic.t-danger { background: rgba(242,109,109,0.13); color: #C94747; }
.fp-state-ic.t-gold { background: rgba(201,162,75,0.15); color: #D8B75F; }
.hm.light .fp-state-ic.t-gold { background: rgba(201,162,75,0.18); color: #9A7B26; }

.fp-state-title { font: 800 17px/1.25 'Inter', sans-serif; letter-spacing: -0.02em; color: #FAFAFA; }
.hm.light .fp-state-title { color: #0F0F10; }
.fp-state-text { font: 400 13px/1.55 'Inter', sans-serif; color: #9C9CA4; max-width: 260px; text-wrap: pretty; }
.hm.light .fp-state-text { color: #5E5E66; }

.fp-state-acts { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 240px; margin-top: 6px; }
.fp-state-acts .pg-btn { height: 46px; }
.fp-state-link {
  min-height: 44px; padding: 4px 8px; background: none; border: none; cursor: pointer;
  font: 650 12.5px/1 'Inter', sans-serif; color: var(--acc-bright, #00C49A);
}
.hm.light .fp-state-link { color: var(--acc, #00A37E); }
.fp-state-link:active { opacity: 0.7; }
/* Ligne de réassurance (chiffrement, Suisse) sous l'action */
.fp-state-note {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  font: 400 10.5px/1.4 'Inter', sans-serif; color: #71717A;
}
.hm.light .fp-state-note { color: #8A8A93; }
.fp-state-note svg { color: var(--acc, #00A37E); }

@media (prefers-reduced-motion: no-preference) {
  .fp-state { animation: fpStateIn 300ms cubic-bezier(0.2,0,0,1) both; }
  @keyframes fpStateIn { from { opacity: 0; transform: translateY(6px); } }
}

/* ═══════════════════════════════════════════════════════
   2. CHARGEMENT · squelettes (silhouettes du contenu à venir)
   ═══════════════════════════════════════════════════════ */
.fp-skel { padding: 6px 0 4px; }
.fp-skel-bar { position: relative; overflow: hidden; background: rgba(255,255,255,0.06); border-radius: 7px; }
.hm.light .fp-skel-bar { background: rgba(15,15,16,0.06); }
.fp-skel-bar.circle { border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .fp-skel-bar::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
    animation: fpShim 1.5s ease-in-out infinite;
  }
  .hm.light .fp-skel-bar::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); }
  @keyframes fpShim { 100% { transform: translateX(100%); } }
}
/* Ligne façon liste (avatar + deux lignes) */
.fp-skel-row { display: flex; align-items: center; gap: 12px; padding: 13px 2px; }
.fp-skel-row + .fp-skel-row { border-top: 1px solid rgba(255,255,255,0.05); }
.hm.light .fp-skel-row + .fp-skel-row { border-top-color: rgba(15,15,16,0.05); }
.fp-skel-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
/* Carte (agenda / structure) */
.fp-skel-card { border-radius: 16px; padding: 15px; margin-bottom: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
.hm.light .fp-skel-card { background: #fff; border-color: rgba(15,15,16,0.06); }
.fp-skel-card .fp-skel-bar + .fp-skel-bar { margin-top: 9px; }
/* Bulles de conversation */
.fp-skel-chat { display: flex; flex-direction: column; gap: 12px; padding: 10px 2px; }
.fp-skel-bub { max-width: 66%; }
.fp-skel-bub.me { align-self: flex-end; }

/* ═══════════════════════════════════════════════════════
   3. HORS-LIGNE · bandeau + file d'attente
   ═══════════════════════════════════════════════════════ */
.fp-offline {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box;
  min-height: 44px; margin: 0 0 2px; padding: 8px 14px;
  background: rgba(226,178,72,0.13); border-bottom: 1px solid rgba(226,178,72,0.22);
  color: #E2B248;
}
.hm.light .fp-offline { background: #FBF3DE; border-bottom-color: rgba(160,118,26,0.25); color: #8A6716; }
.fp-offline-ic { flex-shrink: 0; display: flex; }
.fp-offline-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fp-offline-txt b { font: 700 12px/1.2 'Inter', sans-serif; }
.fp-offline-txt em { font: 400 10.5px/1.3 'Inter', sans-serif; font-style: normal; opacity: 0.85; }
.fp-offline-q {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 99px; background: rgba(226,178,72,0.18);
  font: 700 10px/1 'Inter', sans-serif; letter-spacing: 0.02em;
}
.hm.light .fp-offline-q { background: rgba(160,118,26,0.14); }
.fp-offline-q .fp-dotpulse { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .fp-offline { animation: fpDrop 320ms cubic-bezier(0.2,0,0,1) both; }
  @keyframes fpDrop { from { opacity: 0; transform: translateY(-8px); } }
  .fp-offline-q .fp-dotpulse { animation: fpPulse 1.3s ease-in-out infinite; }
  @keyframes fpPulse { 50% { opacity: 0.35; } }
}

/* ═══════════════════════════════════════════════════════
   4. COUCHE D'ÉTAT sur écran réel · FPSysLayer (forcée via Tweaks)
   Recouvre l'écran actif sans toucher son code. La barre d'onglets
   reste visible/cliquable sur les onglets ; les sous-pages ont un retour.
   ═══════════════════════════════════════════════════════ */
.fp-sys {
  position: absolute; left: 0; right: 0; top: 54px; bottom: 0; z-index: 74;
  display: flex; flex-direction: column;
  background: #050506; color: #FAFAFA;
}
.hm.light .fp-sys { background: #F4F4F2; color: #0F0F10; }
.fp-sys.tabbed { bottom: 70px; }               /* laisse la tab bar */
/* Hors-ligne : bandeau ancré en BAS (au-dessus de la tab bar sur un onglet, tout en bas
   sur une sous-page) · il ne recouvre jamais l'en-tête de l'écran réel. */
.fp-sys.offline { top: auto; bottom: 0; height: auto; background: transparent; pointer-events: none; }
.fp-sys.offline.tabbed { bottom: 70px; }
.fp-sys.offline .fp-offline {
  pointer-events: auto; margin: 0;
  border-top: 1px solid rgba(226,178,72,0.22); border-bottom: none;
}
.hm.light .fp-sys.offline .fp-offline { border-top-color: rgba(160,118,26,0.25); }
@media (prefers-reduced-motion: no-preference) {
  .fp-sys.offline .fp-offline { animation: fpRise 320ms cubic-bezier(0.2,0,0,1) both; }
  @keyframes fpRise { from { opacity: 0; transform: translateY(10px); } }
}
.fp-sys-head { display: flex; align-items: center; gap: 6px; padding: 8px 12px 10px; }
.fp-sys-title { flex: 1; font: 800 19px/1.1 'Inter', sans-serif; letter-spacing: -0.02em; padding-left: 6px; }
.fp-sys-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 0 18px 20px; }
.fp-sys-body::-webkit-scrollbar { display: none; }
.fp-sys-body.center { justify-content: center; }
.fp-sys-badge {
  align-self: center; margin: 4px auto 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 99px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  font: 700 9px/1 'Inter', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #8E8E96;
}
.hm.light .fp-sys-badge { background: #fff; border-color: rgba(15,15,16,0.08); color: #8A8A93; }

/* ═══════════════════════════════════════════════════════
   5. ÉCRAN À PROPOS
   ═══════════════════════════════════════════════════════ */
.ab-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 14px 0 20px; }
.ab-logo { height: 30px; width: auto; display: block; }
.ab-app { font: 800 16px/1.1 'Inter', sans-serif; letter-spacing: -0.01em; color: #FAFAFA; }
.hm.light .ab-app { color: #0F0F10; }
.ab-verchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 99px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
  font: 600 11px/1 'Inter', sans-serif; color: #C7C7CF;
}
.hm.light .ab-verchip { background: #fff; border-color: rgba(15,15,16,0.09); color: #45454C; }
.ab-verchip b { font-weight: 750; color: #FAFAFA; }
.hm.light .ab-verchip b { color: #0F0F10; }
.ab-verchip .ab-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }

/* Bloc confiance : 3 garanties côte à côte */
.ab-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.ab-trust-cell {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px;
  padding: 15px 8px 13px; border-radius: 14px;
  background: #101013; border: 1px solid rgba(255,255,255,0.07);
}
.hm.light .ab-trust-cell { background: #fff; border-color: rgba(15,15,16,0.08); }
.ab-trust-ic {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--acc, #00A37E) 12%, transparent); color: var(--acc-bright, #00C49A);
}
.hm.light .ab-trust-ic { background: color-mix(in srgb, var(--acc, #00A37E) 10%, #fff); color: var(--acc, #00A37E); }
.ab-trust-cell b { font: 700 11px/1.2 'Inter', sans-serif; color: #FAFAFA; }
.hm.light .ab-trust-cell b { color: #0F0F10; }
.ab-trust-cell em { font: 400 9.5px/1.3 'Inter', sans-serif; font-style: normal; color: #8E8E96; }
.hm.light .ab-trust-cell em { color: #6B6B73; }

.ab-foot { text-align: center; padding: 6px 0 4px; }
.ab-foot-line { font: 400 10.5px/1.5 'Inter', sans-serif; color: #5E5E66; }
.hm.light .ab-foot-line { color: #9A9AA2; }

/* Corps de texte légal dans une feuille */
.ab-legal { font: 400 12.5px/1.65 'Inter', sans-serif; color: #B7B7BF; }
.hm.light .ab-legal { color: #45454C; }
.ab-legal p { margin: 0 0 11px; text-wrap: pretty; }
.ab-legal p:last-child { margin-bottom: 0; }
.ab-legal b { color: #FAFAFA; font-weight: 650; }
.hm.light .ab-legal b { color: #0F0F10; }
.ab-legal .ab-legal-upd { font-size: 10.5px; color: #71717A; margin-top: 4px; }

/* Licences open-source · lignes compactes */
.ab-lic { border-radius: 14px; overflow: hidden; background: #101013; border: 1px solid rgba(255,255,255,0.07); }
.hm.light .ab-lic { background: #fff; border-color: rgba(15,15,16,0.08); }
.ab-lic-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; }
.ab-lic-row + .ab-lic-row { border-top: 1px solid rgba(255,255,255,0.06); }
.hm.light .ab-lic-row + .ab-lic-row { border-top-color: rgba(15,15,16,0.06); }
.ab-lic-row b { font: 600 12.5px/1.2 'Inter', sans-serif; color: #FAFAFA; }
.hm.light .ab-lic-row b { color: #0F0F10; }
.ab-lic-row em { font: 500 10.5px/1 'Inter', sans-serif; font-style: normal; letter-spacing: 0.04em; color: #8E8E96; }
.hm.light .ab-lic-row em { color: #8A8A93; }

/* ═══════════════════════════════════════════════════════
   6. GALERIE D'ÉTATS
   ═══════════════════════════════════════════════════════ */
.gl-intro { font: 400 12.5px/1.6 'Inter', sans-serif; color: #9C9CA4; margin: 2px 2px 16px; text-wrap: pretty; }
.hm.light .gl-intro { color: #5E5E66; }
.gl-item { margin-bottom: 20px; }
.gl-cap { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 8px; flex-wrap: wrap; }
.gl-cap b { font: 750 13px/1.2 'Inter', sans-serif; letter-spacing: -0.01em; color: #FAFAFA; }
.hm.light .gl-cap b { color: #0F0F10; }
.gl-cap em {
  font: 600 9px/1 'Inter', sans-serif; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--acc-bright, #00C49A);
}
.hm.light .gl-cap em { color: var(--acc, #00A37E); }
.gl-cap span { font: 400 10.5px/1.3 'Inter', sans-serif; color: #8E8E96; }
.hm.light .gl-cap span { color: #8A8A93; }
/* Cadre = mini-écran, montre l'état en contexte */
.gl-frame {
  position: relative; border-radius: 16px; overflow: hidden;
  min-height: 232px; display: flex; flex-direction: column;
  background: #060608; border: 1px solid rgba(255,255,255,0.08);
}
.hm.light .gl-frame { background: #F4F4F2; border-color: rgba(15,15,16,0.09); }
.gl-frame .fp-state { padding: 22px 6px; max-width: 260px; }
.gl-frame .fp-state-ic { width: 54px; height: 54px; border-radius: 17px; }
.gl-frame .fp-state-title { font-size: 15.5px; }
.gl-frame .fp-state-text { font-size: 12px; }
.gl-frame .fp-skel { padding: 12px 14px; }
.gl-frame-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gl-frame-body.center { justify-content: center; }

/* Handoff / portage React Native */
.gl-handoff { border-radius: 14px; padding: 15px 15px 13px; background: #0E0E11; border: 1px solid rgba(255,255,255,0.07); margin-top: 4px; }
.hm.light .gl-handoff { background: #fff; border-color: rgba(15,15,16,0.08); }
.gl-handoff h4 { margin: 0 0 4px; font: 750 12.5px/1.3 'Inter', sans-serif; color: #FAFAFA; }
.hm.light .gl-handoff h4 { color: #0F0F10; }
.gl-handoff p { margin: 0 0 10px; font: 400 11px/1.55 'Inter', sans-serif; color: #9C9CA4; text-wrap: pretty; }
.hm.light .gl-handoff p { color: #5E5E66; }
.gl-handoff .gl-code {
  font-family: 'SF Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.02em;
  color: var(--acc-bright, #00C49A);
}
.hm.light .gl-handoff .gl-code { color: var(--acc, #00A37E); }
.gl-handoff ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.gl-handoff li { font: 400 11px/1.45 'Inter', sans-serif; color: #B7B7BF; padding-left: 14px; position: relative; }
.hm.light .gl-handoff li { color: #45454C; }
.gl-handoff li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--acc, #00A37E); }
.gl-handoff li b { color: #FAFAFA; font-weight: 650; }
.hm.light .gl-handoff li b { color: #0F0F10; }

/* ═══════════════════════════════════════════════════════
   7. Focus visibles (a11y) · limité aux surfaces ajoutées
   ═══════════════════════════════════════════════════════ */
.fp-state-acts .pg-btn:focus-visible,
.fp-state-link:focus-visible,
.fp-offline:focus-visible,
.ab-lic-row:focus-visible,
.fp-sys-head .pg-back:focus-visible {
  outline: 2px solid var(--acc-bright, #00C49A); outline-offset: 2px; border-radius: 12px;
}

/* ── Têtes de section dans les textes légaux (À propos) ── */
.ab-legal .ab-legal-h { font: 650 10.5px/1 'Inter', sans-serif; letter-spacing: 0.09em; text-transform: uppercase; color: #8E8E96; margin: 16px 0 8px; }
.ab-legal .ab-legal-h:first-child { margin-top: 2px; }
.hm.light .ab-legal .ab-legal-h { color: #6B6B73; }

/* ── Notifications en feuille · barre d'actions ── */
.pg-notif-acts { display: flex; align-items: center; gap: 14px; margin: 0 2px 10px; }
.pg-notif-n { font: 500 11.5px/1 'Inter', sans-serif; color: #8E8E96; margin-right: auto; }

/* ── Aide · recherche ── */
.pg-help-search { margin: 2px 0 6px; }
.pg-help-search input { width: 100%; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.05); color: #FAFAFA; font: 500 12.5px/1 'Inter', sans-serif; padding: 0 13px; outline: none; }
.pg-help-search input::placeholder { color: #71717A; }
.pg-help-search input:focus { border-color: rgba(255,255,255,0.2); }
.hm.light .pg-help-search input { background: #FFFFFF; border-color: rgba(15,15,16,0.1); color: #0F0F10; }
.hm.light .pg-help-search input:focus { border-color: rgba(15,15,16,0.28); }