/*
 * Pages d'authentification en mode sombre.
 *
 * Ces six pages (connexion, mot de passe oublié et ses trois suites,
 * changement forcé) n'héritent pas de `layouts/base.html` : chacune porte sa
 * propre mise en page dans un `<style>`, avec des couleurs écrites en dur.
 *
 * D'où un défaut visible seulement sur la page de connexion, la seule à
 * charger `config.js` — donc la seule à recevoir la classe `dark` sur
 * `<html>`. Les composants du thème (champs de saisie, cartes) basculaient
 * bien en sombre ; les fonds de la page, eux, restaient blancs. Le titre
 * « Connexion », qui n'a pas de couleur propre et suit donc celle du thème,
 * passait au gris clair SUR CE FOND BLANC : mesuré à 1,25:1 contre 17,71:1 en
 * mode clair. Autant dire invisible, sur la première page que voit tout
 * utilisateur qui a choisi le thème sombre.
 *
 * Deux précautions ont guidé ce fichier :
 *
 * 1. Tout est cantonné à `html.dark`. Le mode clair garde exactement les
 *    valeurs des gabarits, au pixel près — y compris le `#f8f9fa` du fond,
 *    légèrement différent du `--phoenix-body-bg` (#f5f7fa) de l'application.
 *
 * 2. Les couleurs de TEXTE écrites en dur sont reprises ici aussi. Ne
 *    corriger que les fonds aurait déplacé le défaut : le sous-titre
 *    « Accédez à votre compte » (#6c757d) et la ligne de version (#6b7280)
 *    seraient tombés sous 3:1 sur le nouveau fond sombre.
 */

/* ── Fonds de page ───────────────────────────────────────────────────── */

/* `body` porte `background-color` en dur dans les six gabarits. La
   spécificité de `html.dark body` l'emporte quel que soit l'ordre de
   chargement — le `<style>` de la page vient après ce fichier. */
html.dark body {
  background-color: var(--phoenix-body-bg, #0f111a);
}

/* Colonne du formulaire de connexion (`background: #ffffff`).
   `--phoenix-white` est le jeton de surface du thème : #fff en clair,
   #141824 en sombre — vérifié, ce n'est pas un blanc constant. */
html.dark .login-left {
  background: var(--phoenix-white, #141824);
}

/* ── Textes à couleur figée ──────────────────────────────────────────── */

/* Sous-titre « Accédez à votre compte » : #6c757d, soit 2,6:1 sur le fond
   sombre. `--phoenix-600` (#8a94ad) rend un gris discret qui reste lisible. */
html.dark .login-box p {
  color: var(--phoenix-600, #8a94ad);
}

/*
 * Ligne de version, en pied de la colonne de connexion. Sa couleur vient
 * d'ici et non d'un `style=` sur la balise : un style en ligne ne cede qu'a
 * `!important`, et la regle du mode sombre restait sans effet — mesure a
 * l'appui, 3,66:1 au lieu des 6:1 attendus.
 */
.login-box .version-application {
  font-size: .75rem;
  color: #6b7280;          /* 4,83:1 sur le blanc du mode clair */
}

html.dark .login-box .version-application {
  color: var(--phoenix-600, #8a94ad);
}

/*
 * Le titre « Connexion » n'est PAS repris ici, volontairement : il n'a pas de
 * couleur propre et suit déjà celle du thème. C'est le fond qui manquait —
 * une fois celui-ci corrigé, le titre repasse à 13:1 tout seul. Lui poser une
 * couleur en dur ici le figerait à nouveau, et rejouerait le défaut au
 * prochain changement de thème.
 */


/* ── Logo selon le thème ─────────────────────────────────────────────── */
/*
 * Le logo de la page de connexion est un tracé marine (#063455) : 1,37:1 sur
 * le fond sombre, aussi illisible que l'était le titre. Les deux variantes
 * sont dans la page, et c'est le CSS qui choisit — un échange piloté par
 * JavaScript montrerait le mauvais logo jusqu'à l'exécution du script.
 */
.logo-mode-sombre {
  display: none;
}

html.dark .logo-mode-clair {
  display: none;
}

html.dark .logo-mode-sombre {
  display: inline-block;
}