/* ═══════════════════════════════════════════════════════════════════════════
   ROOS — LE VERRE DES PAGES PUBLIQUES

   La carte translucide posée sur le fond animé : connexion et demande d'accès.
   Deux pages qui se répondent — on passe de l'une à l'autre par un lien — et
   qui doivent donc être taillées dans la même matière.

   POURQUOI UNE FEUILLE, ET PAS DEUX BLOCS RECOPIÉS. Chaque page portait ses
   propres oklch() en dur. Résultat : elles ne pouvaient que diverger, et
   surtout le défaut de l'une était invisible tant qu'on regardait l'autre.

   CE QU'ELLE CORRIGE, ET QUI SE VOYAIT EN THÈME CLAIR. Les surfaces étaient
   écrites en blanc translucide — `oklch(1 0 0 / .06)` pour le fond d'un champ,
   `oklch(1 0 0 / .10)` pour son trait. Sur le fond d'encre du thème sombre,
   c'est exactement ce qu'il faut : un voile clair qui se détache. Sur une
   carte BLANCHE, c'est du blanc sur du blanc. Les champs disparaissaient
   purement et simplement : sur la page de connexion en thème clair, seul le
   champ ayant le focus était visible — « Mot de passe » n'avait plus de boîte
   du tout, et le bouton d'envoi non plus. Le formulaire restait utilisable au
   jugé, ce qui est la pire façon de l'être.

   D'où des jetons, et non des valeurs : la même règle sert les deux thèmes,
   et chaque thème dit ce que « clair » veut dire chez lui.
   ═══════════════════════════════════════════════════════════════════════════ */

.verre-page {
  /* ── La carte ──
     C'est le FLOU qui fait la matière, pas l'opacité : le fond animé reste
     lisible au travers, réduit à un lavis. Le contraste du texte à travers
     cette valeur-là est mesuré dans tests/test_verre_et_portes.py — la
     baisser fait tomber le test, et c'est le but. */
  --verre: oklch(from var(--sl-2) l c h / .28);
  --flou: blur(40px) saturate(180%);
  /* Le liseré et l'arête de lumière du bord haut. Sans eux, une surface aussi
     transparente n'a plus de contour : elle ne se lit plus comme une plaque
     posée devant le fond, mais comme une tache dans le fond. */
  --verre-trait: oklch(1 0 0 / .11);
  --verre-arete: oklch(1 0 0 / .14);
  --verre-ombre: 0 32px 80px oklch(0 0 0 / .42);
  --verre-lustre: linear-gradient(to bottom, oklch(1 0 0 / .06), transparent 44%);

  /* ── Les champs ──
     Un aplat très léger leur donne leur propre sol : sur une carte aussi
     transparente, un simple trait souligné laisserait le texte saisi se lire
     par-dessus le fond animé. */
  --champ-fond: oklch(1 0 0 / .06);
  --champ-trait: oklch(1 0 0 / .10);
  --champ-fond-hi: oklch(1 0 0 / .09);
  /* Le remplissage automatique REPEINT le champ en blanc quoi qu'en dise la
     feuille. Cette teinte-ci le recouvre — d'une couleur de la maison. */
  --champ-autofill: var(--sl-1);

  /* ── La pastille d'envoi ──
     Blanc translucide et non or : l'or dirait « attention » à trois endroits
     à la fois et n'attirerait donc l'œil nulle part. Rendu au seul geste qui
     compte — la prise de focus — il retrouve son travail. Le bouton, lui, se
     détache par sa clarté : c'est la surface la plus lumineuse de la carte. */
  --cta-fond: oklch(1 0 0 / .14);
  --cta-trait: oklch(1 0 0 / .20);
  --cta-fond-hi: oklch(1 0 0 / .22);
  --cta-trait-hi: oklch(1 0 0 / .32);
  /* La seule note dorée du survol : une chaleur SOUS la pastille, pas une
     couleur posée dessus. */
  --cta-lueur: 0 12px 34px -12px oklch(from var(--gold) l c h / .55);
}

/* ── Le thème clair ───────────────────────────────────────────────────
   La carte est blanche : ce qui doit s'en détacher se creuse au lieu de
   s'éclaircir. Mêmes rôles, mêmes rapports, sens inversé. */
:root[data-theme="light"] .verre-page {
  --verre: oklch(from var(--sl-2) l c h / .58);
  --verre-trait: oklch(0 0 0 / .10);
  --verre-arete: oklch(1 0 0 / .70);
  --verre-ombre: 0 24px 62px oklch(0 0 0 / .13);
  --verre-lustre: linear-gradient(to bottom, oklch(1 0 0 / .50), transparent 44%);

  --champ-fond: oklch(0 0 0 / .035);
  --champ-trait: oklch(0 0 0 / .15);
  --champ-fond-hi: oklch(0 0 0 / .055);

  --cta-fond: oklch(0 0 0 / .05);
  --cta-trait: oklch(0 0 0 / .17);
  --cta-fond-hi: oklch(0 0 0 / .09);
  --cta-trait-hi: oklch(0 0 0 / .28);
}

/* Sans flou, la translucidité seule laisserait le fond animé traverser le
   texte et les champs. On repasse alors à une surface pleine. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .verre-page { --verre: var(--bg-card2); }
}