/* ============================================================
   STOKHOS — base : reset, shell, typographie utilitaire
   ============================================================ */
* { box-sizing: border-box; }

/* Document VERROUILLÉ (app-like) : seul l'intérieur de l'app scrolle.
   Sans ça, le focus clavier mobile scrolle le document entier et le
   refresh RESTAURE cette position — la tabbar passait sous le viewport. */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--c-canvas);
}

body {
  font-family: var(--f-body);
  color: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

a { color: var(--c-brass); }
a:hover { color: var(--c-brass-hover); }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
}

input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus-ring); /* seule "ombre" autorisée */
}

/* Le cadre app : mobile plein écran, centré et borné sur desktop */
#app {
  position: relative;
  margin: 0 auto;
  max-width: 430px;
  height: 100dvh;
  background: var(--c-bg);
  overflow: hidden;
}

/* Couches */
#screen  { position: absolute; inset: 0; z-index: 1; }
#overlay { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#overlay > * { pointer-events: auto; }
#chrome  { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
#chrome.chrome--hidden { display: none; }
/* Confirmations DS (state.confirm) — au-dessus de tout, écran comme fiche */
#modal   { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
#modal > * { pointer-events: auto; }

/* Utilitaires typographiques (le "poinçon" mono) */
.lbl {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  color: var(--c-grey);
}
.lbl-sm { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; color: var(--c-grey); }
.lbl .opt, .lbl-sm .opt { color: var(--c-grey); }
.mono { font-family: var(--f-mono); }

.display { font-family: var(--f-display); font-weight: 700; }

/* Structure d'écran commune */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
}
.screen--tab { animation: fadeUp var(--t-ui) var(--ease) both; }

.screen-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(var(--safe-top) + 14px) 20px 0;
}
.screen--tab .screen-scroll { padding-bottom: calc(var(--tabbar-h) + 16px); }

/* Filet horizontal flexible (séparateurs de sections) */
.rule { flex: 1; height: 1px; background: var(--c-border); }

/* ============================================================
   CONFORT DE LECTURE (audit 2026-07-20) — ~+15 % sur les textes,
   activé par la classe racine (Configuration → AFFICHAGE, persisté
   en localStorage par appareil). Les titres display restent.
   ============================================================ */
html.confort .lbl { font-size: 13px; }
html.confort .lbl-sm { font-size: 11.5px; }
html.confort .chip { font-size: 12px; }
html.confort .fchip { font-size: 11.5px; }
html.confort .dchip { font-size: 12.5px; }
html.confort .meta-9 { font-size: 11.5px; }
html.confort .meta-95 { font-size: 12px; }
html.confort .spec-row .k, html.confort .spec-row .v { font-size: 12px; }
html.confort .hub-row__lbl { font-size: 12px; }
html.confort .hub-row__count { font-size: 11.5px; }
html.confort .pending-band__lbl { font-size: 12px; }
html.confort .item-title { font-size: 15px; }
html.confort .copy-sm { font-size: 14px; }
html.confort .buddy-row__pseudo { font-size: 15px; }
html.confort .buddy-row__depuis { font-size: 11.5px; }
html.confort .fut-card__date { font-size: 11.5px; }
html.confort .fut-card__stand { font-size: 15px; }
html.confort .fut-card__statut { font-size: 11.5px; }
html.confort .expose-row__what, html.confort .expose-row__state { font-size: 11.5px; }
html.confort .tag-or, html.confort .tag-grey { font-size: 11.5px; }
html.confort .inv-navy__date, html.confort .inv-navy__conf,
html.confort .inv-rsvp__statut, html.confort .inv-card__kicker { font-size: 11.5px; }
html.confort .inv-card__stand, html.confort .inv-from, html.confort .inv-mot { font-size: 14.5px; }
html.confort .profil-bio { font-size: 14.5px; }
html.confort .btn-ghost { font-size: 14.5px; }
html.confort .cta { font-size: 16px; }
html.confort .link-add { font-size: 12.5px; }
html.confort .auth-input { font-size: 15.5px; }
html.confort .input-card .main { font-size: 15px; }
html.confort .input-card .sub { font-size: 11.5px; }
html.confort .rat-card__name { font-size: 15px; }
html.confort .rat-card__cal, html.confort .rat-card__count { font-size: 11.5px; }
html.confort .notes-block, html.confort .legal-copy { font-size: 13px; }
html.confort .acp-row__name { font-size: 15px; }
html.confort .acp-row__meta { font-size: 11.5px; }
html.confort .stats__cell .lbl-sm { font-size: 11.5px; }
html.confort .tab .lbl-sm { font-size: 11px; }
html.confort .toast { font-size: 14.5px; }
html.confort .buddy-avis { font-size: 14.5px; }