/**
 * L'identité marine et or, portée sur le web.
 *
 * TOUTES LES COULEURS VIENNENT DE `src/theme/index.ts`, copiées à la valeur et
 * non réinterprétées. Aucune n'a été « adaptée au web » : le site doit se
 * reconnaître à côté de l'application, pas à côté d'un autre site. Quand le
 * thème bouge, c'est ici qu'il faut reporter — ce fichier n'a aucun moyen de le
 * savoir tout seul.
 *
 * LA RÈGLE QUI GOUVERNE L'OR, reprise du commentaire de `paletteSombre` :
 * l'or VIF (`--marque`) porte les titres et les gros chiffres ; l'or MAT
 * (`--progression`) ne dit qu'une chose, LE PROGRÈS — étiquettes, jauges,
 * filets. Les confondre est la seule faute d'identité que ce fichier peut
 * commettre sans que rien ne la signale.
 *
 * UNE SEULE APPARENCE. Le mode clair a été retiré de l'application pour de bon
 * le 29 août ; il n'en revient pas par le site. D'où `color-scheme: dark` et
 * l'absence de toute règle `prefers-color-scheme`.
 */

/* ---------------------------------------------------------------- Les polices

   Servies depuis le site, et non depuis Google Fonts. Ce n'est pas une
   préférence : la politique de confidentialité annonce « aucune publicité,
   aucun pistage, aucune mesure d'audience », et un `<link>` vers
   fonts.gstatic.com transmettrait l'adresse IP de chaque visiteur à un tiers.
   Le site tiendrait alors moins que l'application qu'il présente.

   Les fichiers sont les MÊMES que ceux qu'embarque `app.json`, copiés depuis
   `node_modules/@expo-google-fonts/` : même dessin, même version, aucun risque
   de dérive entre les deux surfaces.

   Ils sont en TTF et non en WOFF2 — environ 975 Ko au total au lieu de ~400.
   Aucun convertisseur n'était installé sur la machine, et le disque était à
   96 % : la conversion est notée dans `LISEZMOI.md` comme un geste ultérieur,
   pas oubliée. */

@font-face {
  font-family: 'Cinzel';
  src: url('polices/Cinzel_600SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url('polices/Cinzel_700Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('polices/Inter_400Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('polices/Inter_600SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

/* IBM Plex Mono ne vient QUE pour les chiffres, comme dans l'application
   (`polices.chiffre`). Une seule graisse est embarquée là où l'application en
   porte trois : le site n'a pas de compteurs discrets ni de totaux d'en-tête,
   il n'a que des grands nombres. */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('polices/IBMPlexMono_700Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/* ----------------------------------------------------------------- Les jetons */

:root {
  color-scheme: dark;

  /* `paletteSombre`, à la valeur. */
  --fond: #0d1826;
  --encre: #f5ead4;
  --marque: #e8c877;
  --sur-marque: #0d1826;
  --progression: #c9a24d;
  --avertissement: #e07b2a;
  --succes: #1b9e4b;
  --surface: #12203380;
  --filet: #c9a24d8c;
  --piste: #33475f;
  --surface-flottante: #0a1220db;

  /* `opacites` — trois niveaux, et pas un quatrième. Le test
     `tests/unit/theme.test.ts` refuse une valeur voisine côté application ;
     rien ne le fait ici, d'où ce rappel. */
  --secondaire: 0.7;
  --appuye: 0.8;

  /* `rayons` */
  --rayon-petit: 4px;
  --rayon-moyen: 8px;
  --rayon-grand: 12px;
  --rayon-rond: 999px;

  /* `espaces`, prolongés pour une page web.
     Les cinq premiers sont ceux du thème ; `--espace-section` et
     `--espace-page` n'ont pas d'équivalent dans l'application, qui n'a pas de
     page longue à aérer. Ils sont nommés à part pour qu'on voie d'un coup
     d'œil ce qui vient du thème et ce qui est propre au web. */
  --serre: 2px;
  --minimal: 4px;
  --petit: 8px;
  --moyen: 12px;
  --grand: 16px;
  --espace-section: 72px;
  --espace-page: 24px;

  /* `textes` — cinq valeurs dans l'application. Le web en ajoute une seule,
     `--titre-page`, pour le haut de l'accueil : une page qui s'ouvre dans un
     navigateur de bureau a une largeur que n'a aucun écran de téléphone. */
  --detail: 13px;
  --corps: 16px;
  --titre-section: 20px;
  --titre-ecran: 24px;
  --titre-connexion: 32px;
  --titre-page: clamp(40px, 7vw, 68px);

  --largeur-lecture: 68ch;
  --largeur-page: 1080px;
}

/* ------------------------------------------------------------------- La base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Le fond est posé sur `html` ET sur `body` : sans le premier, le
     sur-défilement élastique de Safari découvre du blanc sous la page. */
  background: var(--fond);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--fond);
  /* `encre` doit être portée explicitement : c'est vrai dans React Native, qui
     n'hérite pas la couleur d'une `View`, et ça reste la règle ici par
     cohérence de lecture avec le thème. */
  color: var(--encre);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--corps);
  font-weight: 400;
  line-height: 1.65;
  /* 16 px de gouttière, et jamais de défilement horizontal. */
  padding: 0 var(--grand);
  overflow-x: hidden;
}

/* Le filigrane de fond : deux lueurs d'or très basses, à l'opacité du
   `filigrane` du thème (0,05). Il ne porte aucun texte — c'est ce qui
   l'autorise à descendre si bas — et il est muet pour les lecteurs d'écran
   comme l'est son équivalent `accessible={false}` dans l'application. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(232, 200, 119, 0.05), transparent 70%),
    radial-gradient(50% 50% at 95% 25%, rgba(201, 162, 77, 0.05), transparent 70%);
}

/* ------------------------------------------------------- Titres et typographie */

h1,
h2,
h3 {
  font-family: 'Cinzel', 'Times New Roman', serif;
  /* L'or VIF : ce sont des titres. */
  color: var(--marque);
  line-height: 1.2;
  /* Cinzel est une capitale à chasse large. Sans cette correction les titres
     paraissent lâches à côté du texte courant en Inter. */
  letter-spacing: 0.01em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-weight: 700;
  font-size: var(--titre-ecran);
}

h2 {
  font-weight: 600;
  font-size: var(--titre-ecran);
}

h3 {
  font-weight: 600;
  font-size: var(--titre-section);
}

p {
  margin: 0 0 var(--grand);
  max-width: var(--largeur-lecture);
}

strong {
  font-weight: 600;
  color: var(--encre);
}

a {
  color: var(--marque);
  text-decoration-color: var(--filet);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--marque);
}

/* Le focus est VISIBLE, et il l'est partout. L'application est soumise aux
   mêmes seuils de contraste ; une bordure de focus en or sur le marine donne
   le même ratio que l'or sur le fond, mesuré dans le thème. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--marque);
  outline-offset: 3px;
  border-radius: var(--rayon-petit);
}

/* L'étiquette : petites capitales, or MAT. C'est le jeton `progression`, donc
   c'est le progrès qu'il annonce — ici, la section où l'on est. */
.etiquette {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--detail);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--progression);
  margin: 0 0 var(--moyen);
}

.secondaire {
  opacity: var(--secondaire);
}

/* --------------------------------------------------------- Chrome de la page */

.page {
  max-width: var(--largeur-page);
  margin: 0 auto;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
}

.lien-evitement:focus {
  position: static;
  display: inline-block;
  margin: var(--moyen) 0;
  padding: var(--petit) var(--moyen);
  background: var(--marque);
  color: var(--sur-marque);
  border-radius: var(--rayon-moyen);
  font-weight: 600;
  text-decoration: none;
}

.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--grand);
  padding: var(--espace-page) 0;
  border-bottom: 1px solid var(--filet);
}

.marque-lien {
  display: flex;
  align-items: center;
  gap: var(--moyen);
  text-decoration: none;
  margin-right: auto;
}

.marque-lien img {
  width: 36px;
  height: 36px;
  border-radius: var(--rayon-moyen);
  display: block;
}

.marque-nom {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: var(--titre-section);
  color: var(--marque);
  letter-spacing: 0.04em;
}

.navigation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grand);
  align-items: center;
}

.navigation a {
  text-decoration: none;
  font-size: var(--detail);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--encre);
  opacity: var(--secondaire);
}

.navigation a:hover {
  opacity: 1;
  color: var(--marque);
}

/* L'onglet actif est en or MAT, comme dans la barre d'onglets de
   l'application : `progression` y porte l'onglet actif. */
.navigation a[aria-current='page'] {
  opacity: 1;
  color: var(--progression);
}

/* Le sélecteur de langue : deux pastilles, et celle de la langue courante est
   marquée par `aria-current` plutôt que par la seule couleur. */
.langues {
  display: flex;
  gap: var(--minimal);
  padding: var(--minimal);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-rond);
}

.langues a {
  padding: var(--minimal) var(--moyen);
  border-radius: var(--rayon-rond);
  font-size: var(--detail);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--encre);
  opacity: var(--secondaire);
}

.langues a:hover {
  opacity: 1;
}

.langues a[aria-current='true'] {
  background: var(--marque);
  color: var(--sur-marque);
  opacity: 1;
}

/* ------------------------------------------------------------------ Sections */

section {
  padding: var(--espace-section) 0;
}

section + section {
  border-top: 1px solid var(--filet);
}

.plomb {
  font-size: clamp(var(--corps), 2.2vw, var(--titre-section));
  line-height: 1.55;
  opacity: var(--appuye);
  max-width: var(--largeur-lecture);
}

/* -------------------------------------------------------------------- Le haut */

.haut {
  padding: clamp(48px, 9vw, 112px) 0 var(--espace-section);
  border-bottom: 1px solid var(--filet);
}

.haut h1 {
  font-size: var(--titre-page);
  letter-spacing: 0.02em;
  margin-bottom: var(--grand);
}

/* LA DEVISE, et elle est citée au caractère près depuis `signInTagline`.
   Elle ne porte pas de point final : c'est ainsi dans `src/i18n/fr.ts` et dans
   `src/i18n/en.ts`, et le site n'est pas l'endroit où en ajouter un. */
.devise {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: clamp(var(--titre-section), 3vw, var(--titre-connexion));
  /* Or MAT et non vif : la devise n'est pas le titre de la page, elle le
     suit. L'or vif resterait sur « Eukleia » juste au-dessus, et deux ors vifs
     empilés se disputeraient le regard. */
  color: var(--progression);
  line-height: 1.35;
  margin: 0 0 var(--espace-page);
  max-width: 24ch;
  text-wrap: balance;
}

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

.grille {
  display: grid;
  gap: var(--grand);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--espace-page);
}

.carte {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-grand);
  padding: var(--espace-page);
}

.carte h3 {
  margin-bottom: var(--petit);
}

.carte p:last-child {
  margin-bottom: 0;
}

/* Le gros chiffre : IBM Plex Mono, or VIF.
   C'est la seule entorse apparente à « l'or mat porte le progrès » — et c'est
   celle que le thème prévoit lui-même, `marque` étant décrit comme portant les
   « gros chiffres ». L'étiquette qui l'accompagne, elle, reste en or mat. */
.chiffre {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(var(--titre-connexion), 5vw, 56px);
  color: var(--marque);
  line-height: 1;
  display: block;
  margin-bottom: var(--petit);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- Jauges

   La jauge est le seul objet de ce site qui dise quelque chose de vrai sur
   l'application sans passer par une capture : c'est sa forme même qui porte
   l'idée de « ce qu'il reste ». La piste est opaque (`piste`) et le
   remplissage est en or MAT (`progression`) — le partage exact de
   l'application. */

.jauge {
  background: var(--piste);
  border-radius: var(--rayon-rond);
  height: 8px;
  overflow: hidden;
  margin: var(--petit) 0 var(--minimal);
}

.jauge > span {
  display: block;
  height: 100%;
  background: var(--progression);
  border-radius: var(--rayon-rond);
}

.jauge-ligne {
  margin-bottom: var(--grand);
}

.jauge-ligne:last-child {
  margin-bottom: 0;
}

.jauge-haut {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--moyen);
  font-size: var(--detail);
}

.jauge-nom {
  font-weight: 600;
}

/* Le compte restant : chiffres en or mat, comme TOUT chiffre de
   l'application hors gros nombre de tête. */
.jauge-reste {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--progression);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* -------------------------------------------------------------------- Listes */

.liste-nue {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--largeur-lecture);
}

.liste-nue > li {
  position: relative;
  padding: 0 0 0 28px;
  margin-bottom: var(--moyen);
}

/* La puce est un losange d'or mat, dessiné et non écrit : un caractère
   géométrique peut manquer de la police et se faire remplacer en silence. */
.liste-nue > li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--progression);
  transform: rotate(45deg);
  border-radius: 1px;
}

.liste-nue > li:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------- Boutons */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--petit);
  /* 44 px de haut : la cible minimale des Human Interface Guidelines. Le site
     se lit d'abord au téléphone. */
  min-height: 44px;
  padding: var(--moyen) var(--espace-page);
  border-radius: var(--rayon-moyen);
  border: 1px solid transparent;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--corps);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.bouton-principal {
  background: var(--marque);
  /* Le marine sur l'or, jamais du blanc — `surMarque`. */
  color: var(--sur-marque);
}

.bouton-discret {
  background: var(--surface);
  border-color: var(--filet);
  color: var(--encre);
}

.rangee-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--moyen);
  align-items: center;
  margin-top: var(--espace-page);
}

/* --------------------------------------------------- Emplacements de captures

   CE QUI SUIT N'EST PAS UNE ILLUSTRATION, et ne doit jamais en devenir une.
   Les captures d'Eukleia n'existent pas encore : les produire demande une
   build Release branchée sur la production et le compte de l'éditeur, qui
   porte 1 164 jeux là où la pile locale en a cinq. Un cadre vide qui annonce
   ce qu'on attend est honnête ; une image d'ambiance trouvée ailleurs
   mentirait sur le produit.

   Chaque cadre porte en clair l'écran attendu et ses dimensions. Pour les
   remplir : remplacer le `<figure class="capture">` par un `<img>` et
   supprimer la classe. */

.captures {
  display: grid;
  gap: var(--espace-page);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: var(--espace-page);
}

.capture {
  margin: 0;
  /* 9:19,5 — le rapport d'un iPhone sans tablette, `supportsTablet: false`. */
  aspect-ratio: 9 / 19.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--petit);
  padding: var(--espace-page);
  text-align: center;
  background: var(--surface);
  /* Le trait discontinu dit « il manque quelque chose » sans qu'on ait besoin
     de le lire. */
  border: 1px dashed var(--filet);
  border-radius: calc(var(--rayon-grand) * 2);
}

.capture-ecran {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: var(--corps);
  color: var(--marque);
}

.capture-attente {
  font-size: var(--detail);
  opacity: var(--secondaire);
  line-height: 1.5;
}

.capture-format {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--progression);
}

/* ------------------------------------------------------------------ Bannières

   L'ambre (`avertissement`) et non l'or : le thème mesure 14,4° d'écart de
   teinte entre les deux précisément pour qu'un avertissement ne se lise pas
   comme une jauge. */

.banniere {
  display: flex;
  gap: var(--grand);
  padding: var(--grand) var(--espace-page);
  border-radius: var(--rayon-moyen);
  border: 1px solid var(--avertissement);
  background: var(--surface);
  margin: var(--espace-page) 0;
  max-width: var(--largeur-lecture);
}

.banniere p {
  margin: 0;
}

.banniere::before {
  content: '';
  flex: 0 0 3px;
  background: var(--avertissement);
  border-radius: var(--rayon-rond);
}

/* -------------------------------------------------------- Prose des documents

   La politique de confidentialité et l'assistance sont des documents, pas des
   pages de présentation. Elles sont étroites et leurs titres descendent d'un
   cran : sur une page qui en porte quinze, un titre de section n'a pas à
   crier. */

.prose {
  max-width: var(--largeur-lecture);
}

.prose h2 {
  font-size: var(--titre-section);
  margin: var(--espace-section) 0 var(--grand);
}

.prose h2:first-of-type {
  margin-top: var(--espace-page);
}

.prose h3 {
  font-size: var(--corps);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--progression);
  margin: var(--espace-page) 0 var(--moyen);
}

.prose ul {
  padding-left: var(--espace-page);
  margin: 0 0 var(--grand);
}

.prose li {
  margin-bottom: var(--petit);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--grand);
  font-size: var(--detail);
  /* Les tableaux de la politique ont trois colonnes de prose : sur un
     téléphone, ils débordent. Ils défilent dans leur propre cadre plutôt que
     d'imposer un défilement à la page entière. */
  display: block;
  overflow-x: auto;
  white-space: normal;
}

.prose th,
.prose td {
  border-bottom: 1px solid var(--filet);
  padding: var(--petit) var(--moyen);
  text-align: left;
  vertical-align: top;
  min-width: 11ch;
}

.prose th {
  font-weight: 600;
  color: var(--progression);
  font-size: var(--detail);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.prose blockquote {
  margin: 0 0 var(--grand);
  padding-left: var(--grand);
  border-left: 2px solid var(--filet);
  opacity: var(--secondaire);
}

.date-maj {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--detail);
  color: var(--progression);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------- Pied de page */

.pied {
  border-top: 1px solid var(--filet);
  padding: var(--espace-section) 0 var(--espace-section);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-page);
  justify-content: space-between;
  align-items: flex-start;
  font-size: var(--detail);
}

.pied a {
  color: var(--encre);
  opacity: var(--secondaire);
}

.pied a:hover {
  opacity: 1;
  color: var(--marque);
}

.pied-liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grand);
}

.pied-mention {
  opacity: var(--secondaire);
  max-width: 44ch;
  margin: 0;
}

/* ------------------------------------------------------------------ Téléphone */

@media (max-width: 640px) {
  :root {
    --espace-section: 48px;
  }

  .entete {
    gap: var(--moyen);
  }

  .navigation {
    order: 3;
    width: 100%;
    gap: var(--moyen);
  }

  /* Deux colonnes de cadres de capture sur un téléphone donnent des vignettes
     illisibles. Un seul cadre, centré, et large. */
  .captures {
    grid-template-columns: minmax(0, 260px);
    justify-content: center;
  }
}

/* ------------------------------------- Deux classes au lieu de deux `style=`

   Elles n'existent que pour vider la page de ses attributs `style` décoratifs.
   Ce qui reste en ligne, c'est la LARGEUR de chaque jauge — une donnée propre à
   l'élément, qu'aucune classe ne peut porter sans en inventer une par valeur.
   C'est ce reste qui oblige la politique de sécurité à garder
   `style-src 'unsafe-inline'`, et c'est écrit dans `_headers`. */

.carte-jauges {
  max-width: var(--largeur-lecture);
  margin-top: var(--espace-page);
}

.mention-exemple {
  font-size: var(--detail);
  opacity: var(--secondaire);
  margin-top: var(--moyen);
}

/* ------------------------------------------- L'emplacement du lien App Store

   IL NE DOIT PAS RESSEMBLER À UN BOUTON. Une première version lui donnait
   `.bouton-discret` : à l'écran, il se lisait comme une action désactivée, et
   un visiteur aurait essayé de cliquer dessus. Ce n'est pas une action
   indisponible, c'est un FAIT — l'application n'est pas publiée. Un fait se
   dit, il ne se grise pas.

   Quand la fiche existera, ce bloc disparaît et laisse la place au badge
   officiel d'Apple (`developer.apple.com/app-store/marketing/guidelines/`),
   qui ne se redessine pas. */

.attente-store {
  display: inline-flex;
  align-items: center;
  gap: var(--petit);
  min-height: 44px;
  font-size: var(--detail);
  color: var(--encre);
  opacity: var(--secondaire);
}

.attente-store::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--progression);
  transform: rotate(45deg);
  border-radius: 1px;
  flex: none;
}