/* ── Les dessins d'Evolii : leurs couleurs, et l'écran vide ────────────────
   CETTE FEUILLE EST CHARGÉE SUR TOUTES LES SURFACES, et c'est sa raison
   d'être. Les jetons vivaient dans `ecrans.css`, que seul l'espace charge :
   le dessin de la porte - le tout premier écran, celui qu'on voit avant
   d'avoir un compte - sortait donc en noir, sans une seule de ses couleurs.
   Ce qui sert partout se charge partout. */

/* ══════════════════════════════════════════════════════════════════════════
   LES DESSINS : une famille, deux réglages
   ══════════════════════════════════════════════════════════════════════════
   Pas une couleur en dur dans `commun/Illustrations.php` : tout passe par ces
   jetons, et ils sont dérivés de DEUX choses.

   1. L'ACCENTUATION du poste (`--sys-blue`, que le thème remplace). Une app
      qui laisse choisir sa couleur ment si ses dessins restent bleus.
   2. LE THÈME. Un dessin figé en clair sur un écran sombre fait une lampe au
      milieu de la page - c'est la première chose qu'on voit, et ce n'est pas
      ce qu'on voulait montrer.

   `color-mix` fait le travail : on n'écrit jamais deux fois la même teinte, et
   changer l'accentuation repeint la famille entière. */
.evolii-illu {
  /* La tache du fond : l'accentuation, presque effacée. */
  --illu-tache-1: color-mix(in srgb, var(--sys-blue, #0a84ff) 16%, var(--fond-carte, #fff));
  --illu-tache-2: color-mix(in srgb, var(--sys-blue, #0a84ff) 9%, var(--fond-carte, #fff));
  /* L'objet : l'accentuation pleine, en deux valeurs pour le volume. */
  --illu-objet-1: color-mix(in srgb, var(--sys-blue, #0a84ff) 78%, white);
  --illu-objet-2: var(--sys-blue, #0a84ff);
  /* Le papier : la surface d'une carte, très légèrement ombrée en bas. */
  --illu-papier-1: var(--fond-carte, #fff);
  --illu-papier-2: color-mix(in srgb, var(--sys-blue, #0a84ff) 7%, var(--fond-carte, #fff));
  /* Les lignes de texte dessinées : elles se lisent comme du texte muet. */
  --illu-trait:      color-mix(in srgb, var(--sys-blue, #0a84ff) 22%, var(--fond-carte, #fff));
  --illu-trait-fort: color-mix(in srgb, var(--sys-blue, #0a84ff) 42%, var(--fond-carte, #fff));
  /* La touche chaude ne suit PAS l'accentuation : c'est tout son intérêt,
     un seul point qui ne soit pas de la couleur du reste. */
  --illu-chaud-1: #fcd34d;
  --illu-chaud-2: #f5a524;
  /* Le vert dit « c'est fait », comme partout ailleurs. */
  --illu-vert-1: color-mix(in srgb, var(--sys-green, #30d158) 72%, white);
  --illu-vert-2: var(--sys-green, #30d158);
  /* La peau reste de la peau : une photo qui vire au bleu ne veut plus rien
     dire, et c'est précisément ce qu'on regarde dans cette app. */
  --illu-peau-1: #efdccd;
  --illu-peau-2: #cdab92;
  --illu-peau-3: #a9836a;
  --illu-ombre: #1e3a5f;
  --illu-ombre-force: .18;
}
/* Sur fond sombre : le papier suit déjà les jetons, restent les tons chauds et
   la peau (un jaune pur sur du noir brûle) et l'ombre (bleutée sur du noir,
   elle fait un halo). Écrit DEUX fois - le réglage du système, puis le choix
   explicite du poste - parce que le thème a trois états et qu'un seul des
   deux blocs laisserait la moitié des écrans avec des dessins qui jurent. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .evolii-illu {
    --illu-chaud-1: #e8bf47; --illu-chaud-2: #d9911f;
    --illu-peau-1: #c9b3a3; --illu-peau-2: #a1846e; --illu-peau-3: #86664f;
    --illu-ombre: #000; --illu-ombre-force: .45;
  }
}
:root[data-theme="sombre"] .evolii-illu {
  --illu-chaud-1: #e8bf47; --illu-chaud-2: #d9911f;
  --illu-peau-1: #c9b3a3; --illu-peau-2: #a1846e; --illu-peau-3: #86664f;
  --illu-ombre: #000; --illu-ombre-force: .45;
}

/* L'écran vide : un dessin, une phrase qui constate, une phrase qui dit quoi
   faire. Centré, et jamais plus large qu'une ligne de lecture. */
.evolii-vide { padding: 20px 0 8px; text-align: center; }
.evolii-vide .evolii-illu { display: block; margin: 0 auto 10px; }
.evolii-vide-quoi { margin: 0; font-size: 14px; font-weight: 500; color: var(--texte, #111); }
.evolii-vide-aide {
  margin: 4px auto 0; max-width: 30rem;
  font-size: 13px; line-height: 1.45; color: var(--mut, #6b6b73);
}