/* La charte d'Exercio, commune aux pages du site : les couleurs, la police et les formes de
   l'application (app/src/main/java/com/gymbro/app/ui/theme/Theme.kt, rebrand/tokens.json).
   Clair par défaut, sombre quand le navigateur l'est — l'application, elle, laisse choisir. */

@font-face {
  font-family: "Golos Text";
  src: url("/fonts/golos-text-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Golos Text";
  src: url("/fonts/golos-text-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Golos Text";
  src: url("/fonts/golos-text-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Golos Text";
  src: url("/fonts/golos-text-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ground: #efefed;
  --ground-glow: rgba(255, 106, 19, 0.10);
  --surface: #ffffff;
  --hero-surface: #ffffff;
  --hero-glow: rgba(255, 106, 19, 0.24);
  --text: #1b1c1e;
  --text-mid: #3a3b3e;
  --text-secondary: #6c6e72;
  --text-tertiary: #7c7e82;
  --accent: #ff6a13;
  --on-accent: #1f1208;
  /* L'orange des textes et des icônes : l'orange vif ne tient pas le contraste sur blanc. */
  --accent-text: #c4440c;
  --accent-text-strong: #b54a0c;
  --accent-chip: #ffd9c2;
  --accent-soft-12: rgba(255, 106, 19, 0.12);
  --accent-soft-14: rgba(255, 106, 19, 0.14);
  --accent-soft-16: rgba(255, 106, 19, 0.16);
  --badge: #efefed;
  --divider: #e6e6e3;
  --divider-soft: #ecebea;
  --outline: #dcdcd9;
  --idle-ring: #c9cac7;
  --in-progress-surface: #fff4ec;
  --in-progress-border: #ff9a5c;
  --warn: #9a5b00;
  --warn-soft: rgba(154, 91, 0, 0.10);
  --shadow-accent: rgba(255, 106, 19, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #17181a;
    --ground-glow: rgba(255, 122, 48, 0.10);
    --surface: #222326;
    --hero-surface: #2a2622;
    --hero-glow: rgba(255, 122, 48, 0.24);
    --text: #f4f4f2;
    --text-mid: #dededb;
    --text-secondary: #a3a5a8;
    --text-tertiary: #929497;
    --accent: #ff7a30;
    --on-accent: #1f1208;
    --accent-text: #ff7a30;
    --accent-text-strong: #ffae7f;
    --accent-chip: #ffc49f;
    --accent-soft-12: rgba(255, 122, 48, 0.12);
    --accent-soft-14: rgba(255, 122, 48, 0.14);
    --accent-soft-16: rgba(255, 122, 48, 0.16);
    --badge: #2e2f32;
    --divider: #323336;
    --divider-soft: #2f3033;
    --outline: #3a3b3f;
    --idle-ring: #4c4d51;
    --in-progress-surface: #2b241f;
    --in-progress-border: #b8581f;
    --warn: #e3b778;
    --warn-soft: rgba(227, 183, 120, 0.12);
    --shadow-accent: rgba(255, 122, 48, 0.28);
  }
}

/* Le thème choisi à la main (page du suivi, `data-theme` sur <html>) passe avant celui du
   téléphone. Les autres pages n'en posent pas : elles suivent le téléphone. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #17181a;
  --ground-glow: rgba(255, 122, 48, 0.10);
  --surface: #222326;
  --hero-surface: #2a2622;
  --hero-glow: rgba(255, 122, 48, 0.24);
  --text: #f4f4f2;
  --text-mid: #dededb;
  --text-secondary: #a3a5a8;
  --text-tertiary: #929497;
  --accent: #ff7a30;
  --on-accent: #1f1208;
  --accent-text: #ff7a30;
  --accent-text-strong: #ffae7f;
  --accent-chip: #ffc49f;
  --accent-soft-12: rgba(255, 122, 48, 0.12);
  --accent-soft-14: rgba(255, 122, 48, 0.14);
  --accent-soft-16: rgba(255, 122, 48, 0.16);
  --badge: #2e2f32;
  --divider: #323336;
  --divider-soft: #2f3033;
  --outline: #3a3b3f;
  --idle-ring: #4c4d51;
  --in-progress-surface: #2b241f;
  --in-progress-border: #b8581f;
  --warn: #e3b778;
  --warn-soft: rgba(227, 183, 120, 0.12);
  --shadow-accent: rgba(255, 122, 48, 0.28);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--text);
  font: 400 16px/1.45 "Golos Text", system-ui, -apple-system, Roboto, "Segoe UI", "Noto Sans", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* La lueur orange du fond de l'application, en haut à gauche — à droite en arabe. Fixée derrière
   la page pour qu'elle ne défile pas avec elle. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 0 0, var(--ground-glow), transparent 520px);
}
[dir="rtl"] body::before, body[dir="rtl"]::before {
  background: radial-gradient(circle at 100% 0, var(--ground-glow), transparent 520px);
}

main {
  max-width: 480px;
  margin: 0 auto;
  padding:
    max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

svg { flex: none; fill: currentColor; }

/* ----- En-tête : l'icône et le nom, comme l'accueil de l'application ----- */

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 18px;
}
.brand img { width: 44px; height: 44px; border-radius: 14px; }
.brand-name { font-size: 28px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.1; }

/* ----- Titres ----- */

h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.9px;
  line-height: 1.15;
}
.kicker { margin: 0 0 6px; color: var(--accent-text-strong); font-size: 13px; font-weight: 600; }
.lead { margin: 10px 0 0; color: var(--text-mid); font-size: 15px; }
.section-title {
  margin: 28px 4px 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* ----- Cartes ----- */

.card {
  background: var(--surface);
  border-radius: 24px;
  padding: 18px;
}
.card + .card { margin-top: 12px; }
.card h2, .card h3 { margin: 0; font-size: 16px; font-weight: 600; }
.card p { margin: 4px 0 0; color: var(--text-secondary); font-size: 14px; }

/* La carte du haut : fond blanc, lueur orange dans le coin, comme « Prochaine séance ». */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-surface);
  border-radius: 28px;
  padding: 18px 18px 20px 20px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.04);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 100% 0, var(--hero-glow), transparent 260px);
}
[dir="rtl"] .hero::before { background: radial-gradient(circle at 0 0, var(--hero-glow), transparent 260px); }
.hero > * { position: relative; }

/* ----- Étiquettes ----- */

.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-chip);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.pill.soft { background: var(--accent-soft-14); color: var(--accent-text-strong); font-variant-numeric: tabular-nums; }
.pill.neutral { background: var(--badge); color: var(--text-secondary); }

/* ----- Boutons : pilule pleine, pilule orange pâle, pilule neutre ----- */

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s, background-color 0.15s;
}
.button svg { width: 24px; height: 24px; }
.button.primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 10px 26px var(--shadow-accent);
}
.button.primary:active { filter: brightness(0.92); }
.button.tonal {
  min-height: 48px;
  background: var(--accent-soft-16);
  color: var(--accent-text-strong);
  font-size: 15px;
  font-weight: 600;
}
.button.tonal svg { width: 20px; height: 20px; }
.button.tonal:active { background: var(--accent-soft-12); }
.button.neutral {
  min-height: 48px;
  background: var(--surface);
  color: var(--accent-text-strong);
  font-size: 15px;
  font-weight: 600;
}

.hint { margin: 12px 8px 0; color: var(--text-secondary); font-size: 14px; text-align: center; }

/* Focus clavier visible partout, dans l'orange. */
a:focus-visible, button:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* L'espacement des lettres casse les liaisons de l'arabe et n'a pas de sens en chinois. */
html:lang(ar) *, html:lang(zh) *, html:lang(zh-Hans) * { letter-spacing: 0 !important; }