/* =========================================================================
   Bayan — polices, remise à zéro, structure de page
   ========================================================================= */

/* Polices auto-hébergées (fonctionnent hors connexion). Texte arabe : Amiri Quran,
   retenue en phase 2 (signes uthmani corrects, 45 Ko) ; Amiri ne sert qu'au latin. */
@font-face { font-family: 'Amiri'; src: url('/fonts/amiri-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Amiri'; src: url('/fonts/amiri-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Amiri'; src: url('/fonts/amiri-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Amiri Quran'; src: url('/fonts/amiri-quran-arabic-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Work Sans'; src: url('/fonts/work-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/fonts/work-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/fonts/work-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/fonts/work-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--gold-soft); color: var(--title); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Texte arabe du Coran : toujours de droite à gauche, police coranique */
.ar {
  font-family: var(--font-quran);
  direction: rtl;
  unicode-bidi: isolate;
  color: var(--ar-text);
  line-height: 2.1;
  font-size: 26px;
  text-align: right;
}

/* =========================================================================
   Coquille de l'application
   ========================================================================= */

#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  padding: calc(20px + var(--safe-top)) 20px calc(96px + var(--safe-bottom));
  min-height: 100vh;
}

.screen .topbar { margin: calc(-20px - var(--safe-top)) -20px 16px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px + var(--safe-top)) 20px 14px;
  background: var(--topbar-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.topbar h1 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0;
  color: var(--title);
  flex: 1;
}

.muted { color: var(--text-dim); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }