/* Pages publiques Squadr — transcription des tokens de src/constants/theme.ts.
   Dark only, comme l'app. Outfit auto-hébergée, avec repli système.

   La famille est déclarée dans `/fonts.css`, chargé par un <link> AVANT
   celui-ci dans chacune des 4 pages. Pourquoi un <link> et pas l'`@import`
   qui vivait ici : un `@import` n'est découvert qu'une fois cette feuille
   téléchargée et analysée, ce qui sérialise deux allers-retours réseau avant
   le moindre glyphe. Le <link> part en parallèle. */

:root {
  --bg-base: #0a0a0e;
  --bg-surface: #14161c;
  --bg-surface-raised: #1b1e26;
  --accent: #ff6b00;
  --accent-soft: rgba(255, 107, 0, 0.14);
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --text-tertiary: #6b7280;
  --text-on-accent: #0a0a0e;
  --border: rgba(255, 255, 255, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.carte {
  width: 100%;
  max-width: 400px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.etat {
  color: var(--text-secondary);
  font-size: 15px;
}

.avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  color: var(--accent);
}

h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.sous-titre {
  margin: -12px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.tier {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}

.tier-emoji {
  font-size: 32px;
}

.tier strong {
  display: block;
  font-size: 20px;
  font-weight: 600;
}

.tier small {
  display: block;
  color: var(--text-secondary);
  font-size: 13px;
}

.stats {
  display: flex;
  gap: 12px;
}

.tuile {
  flex: 1;
  padding: 16px 8px;
  border-radius: 12px;
  background: var(--bg-surface);
}

.tuile strong {
  display: block;
  font-size: 22px;
  font-weight: 600;
}

.tuile small {
  display: block;
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.badge {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--bg-surface-raised);
  color: var(--text-secondary);
  font-size: 13px;
}

.ouvrir {
  margin-top: 4px;
}

.bouton {
  display: block;
  padding: 15px 24px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.note {
  margin: 12px 0 0;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

.logo {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.logo span {
  color: var(--accent);
}

/* --- Pages de documents légaux (privacy, delete-account) ------------------
   Les pages courtes (accueil, profil, match) sont des cartes centrées dans la
   fenêtre. Un document long, lui, doit commencer en haut : avec le
   `align-items: center` du body, son début serait rogné hors de l'écran dès
   que le texte dépasse la hauteur de la fenêtre. D'où une classe sur le body
   plutôt qu'une surcharge globale, qui casserait les trois autres pages. */

body.page-doc {
  align-items: flex-start;
  padding: 40px 20px 64px;
}

.doc {
  width: 100%;
  max-width: 720px;
  text-align: left;
  line-height: 1.65;
  font-size: 16px;
  color: var(--text-secondary);
}

.doc .logo {
  font-size: 22px;
  margin: 0 0 32px;
}

.doc h1 {
  font-size: 32px;
  margin: 0 0 8px;
  color: var(--text-primary);
}

.doc h2 {
  font-size: 19px;
  font-weight: 600;
  margin: 40px 0 12px;
  color: var(--text-primary);
}

.doc .maj {
  margin: 0 0 32px;
  font-size: 14px;
  color: var(--text-tertiary);
}

.doc strong {
  color: var(--text-primary);
  font-weight: 600;
}

.doc em {
  color: var(--text-tertiary);
  font-style: normal;
  font-size: 15px;
}

.doc a {
  color: var(--accent);
}

.doc ul,
.doc ol {
  padding-left: 22px;
}

.doc li {
  margin-bottom: 10px;
}

/* Le tableau des données collectées déborde sur un écran de téléphone : il
   défile horizontalement dans son propre conteneur plutôt que d'élargir la
   page entière. */
.doc table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 15px;
}

.doc th,
.doc td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.doc th {
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
}

.doc .note {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: left;
}