/* THE REGISTER, reprise de src/theme.ts. Le site et l'app doivent avoir l'air
   du meme endroit: quelqu'un qui clique sur un lien d'invitation arrive ici
   avant d'arriver dans Nerdie, et jusqu'au 10/09 il arrivait sur du creme et
   du vert pour ouvrir une app blanche et marine.

   LES VALEURS VIENNENT DE src/theme.ts, PAS D'UNE APPROXIMATION. Une seule
   exception, declaree: `--radius` reste, a zero. Les pages legales le
   referencent, et le mettre a zero ici retire les cartes partout d'un coup;
   le supprimer aurait laisse un `border-radius: ;` invalide dans trois pages.

   Ce fichier habille les pages LEGALES (privacy, terms, support, claim) et le
   cadre commun. La page d'accueil porte son propre style, en ligne, parce
   qu'elle est la seule qui a une mise en page a elle. */
:root {
  --screen: #ffffff;
  --paper: #faf6ec;
  --card: #faf6ec;
  --pill: #f3eee2;
  --ink: #191814;
  --ink2: #4a4638;
  /* `#767163` et pas l'ancien `#8b8676`: la valeur de Fairway donnait 3,6:1
     sur du blanc, sous le seuil WCAG AA de 4,5:1. Voir src/theme.ts. */
  --muted: #767163;
  /* L'ACCENT UNIQUE, marine. Il remplace le vert partout. */
  --accent: #23406b;
  --accent-dark: #1a3050;
  /* Le vert et l'or ne sont plus des accents: ils disent un STATUT. */
  --public: #1f7a4c;
  --private: #a88a46;
  --highlight: #d9f27a;
  /* Le filet fin entre deux lignes, et le filet fort sous un en-tete. */
  --line: #eae4d5;
  --rule: #d9d1bd;
  /* Plus de rayons: un registre regle, il n'encadre pas. */
  --radius: 0px;
  /**
   * LA MARGE LATERALE, FLUIDE (24/09).
   *
   * Elle valait 20 px, la meme sur un iPhone SE et sur un iPad, et Charles l'a
   * relevee sur son telephone: « pas lisible, ca ne fait pas pro ». Une valeur
   * fixe est trop serree la ou l'ecran est etroit ET trop serree la ou il est
   * large, ce qui est le defaut classique d'une marge en pixels.
   *
   * `clamp` la fait suivre la largeur: 22 px au plancher (iPhone SE, 320 px),
   * environ 25 sur un iPhone courant, 44 au plafond. Le plancher n'est pas
   * negociable — en dessous, le texte touche le bord et la page a l'air
   * cassee — et le plafond existe parce qu'au-dela la colonne de texte se
   * retrecit sans rien gagner, `max-width` s'en chargeant deja.
   *
   * `env(safe-area-inset-*)` s'y ajoute plus bas: en paysage sur un iPhone a
   * encoche, la marge gauche passe SOUS l'encoche, et aucune valeur en px ne
   * peut le prevoir.
   */
  --gutter: clamp(22px, 6.4vw, 44px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--screen);
  color: var(--ink2);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* `max()` et pas `+`: la marge vaut la plus grande des deux, jamais leur
   somme, sinon le paysage sur un iPhone a encoche double la marge gauche. */
.wrap {
  max-width: 680px; margin: 0 auto;
  padding: 34px var(--gutter) 72px;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
header.top {
  display: flex; align-items: center; gap: 10px;
  padding: 18px var(--gutter); border-bottom: 1px solid var(--rule);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
header.top a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* Les pages legales portent la meme marque que l'accueil: un lien
   d'invitation peut arriver sur /privacy avant l'accueil. L'icone garde son
   arrondi propre — c'est un objet du systeme, pas un element de la page. */
.mark { width: 26px; height: 26px; border-radius: 7px; background: url("/mark.svg") center/contain no-repeat; }
.name { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.2px; }

/* Fluide plutot que casse par palier: sur un iPhone SE un h1 de 34 px force
   une cesure au milieu d'un mot. */
h1 { font-size: clamp(27px, 7vw, 34px); line-height: 1.14; font-weight: 800; color: var(--ink); letter-spacing: -0.7px; margin: 0 0 8px; }
h2 { font-size: clamp(18px, 4.6vw, 20px); font-weight: 800; color: var(--ink); margin: 34px 0 6px; letter-spacing: -0.2px; }
h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 22px 0 4px; }
p, li { margin: 10px 0; }
ul { padding-left: 20px; }
a { color: var(--accent); }
.lead { font-size: clamp(17px, 4.4vw, 19px); color: var(--ink2); margin-bottom: 4px; }
.date { font-size: 14px; color: var(--muted); margin-top: 0; }
/* L'encart des pages legales: le creme de la lecture, un filet, pas de rayon. */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 22px 0; }
.card p:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.big { font-size: clamp(18px, 4.8vw, 21px); font-weight: 700; color: var(--ink); }
footer { border-top: 1px solid var(--rule); margin-top: 48px; padding-top: 18px; font-size: 14px; color: var(--muted); }
footer a { color: var(--muted); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }