/* ==========================================================================
   LE FOND DE PAGE, PARTOUT

   Une seule image pour tout le site, la meme pour tout le monde. Ces regles
   vivaient dans assets/vitrine.css, qui n'est charge que par index, compte et
   amis : elles n'y avaient plus leur place des lors que les pages legales, la
   table des types et les nouveautes devaient porter le meme fond.

   Elles sont dans un fichier a elles, et non recopiees dans app.css,
   public.css et home.css : le site a trois mondes de feuilles de style, et une
   regle recopiee trois fois est une regle qu'on corrigera une fois sur trois.
   ========================================================================== */

/* UNE COUCHE A PART, ET NON UN background-image SUR body : le fond doit rester
   FIXE pendant qu'on fait defiler mille cinq cents cartes, et
   background-attachment:fixed rame sur telephone et saute sur iOS. */
.fondpage{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  /* La densite du voile. Trois nombres, et rien d'autre, pour que la regle qui
     le peint reste unique. Le pourquoi du dedoublement est juste en dessous. */
  --v1:62%;--v2:88%;--vu:90%}

/* EN THEME CLAIR, LE VOILE DOIT ETRE BEAUCOUP PLUS DENSE, et ce n'est pas un
   reglage a l'oeil : c'est mesure.

   L'image est bleu nuit. En theme sombre, un voile sombre pose sur une image
   sombre ne deplace presque rien, et le contraste du texte est le meme
   qu'avant, page par page. En theme clair, le meme voile leger laisse le fond
   composite DESCENDRE loin sous le #eef1f7 de la page ; les gris secondaires,
   deja proches du seuil sur un fond plat, passent dessous.

   Contraste mesure sur cinq pages, texte par texte, avec et sans le fond :
   a 62/88 le theme clair perdait treize textes sur l'accueil du Living Dex,
   deux sur "Mon compte", trois sur les amis, un sur les types et un sur les
   nouveautes. A 88/96 il en restait cinq. A 94/98, plus un seul : chaque page
   retrouve exactement le score qu'elle a sans fond du tout.

   La consequence est a assumer : en theme clair, l'image se devine a peine.
   C'est ce que coute une image sombre derriere une page claire. Une seconde
   image, claire, deposee pour ce theme, serait la vraie reponse.

   Un seul selecteur depuis que le theme « Comme mon système » a ete retire :
   il n'y a plus que sombre et clair, et le clair pose toujours l'attribut.
   Une page sans theme clair du tout — accueil.php, les pages publiques — ne le
   porte jamais : elle garde donc ses valeurs sombres, ce qui est exactement ce
   qu'il lui faut. */
/* EN SOMMEIL, comme la palette claire d'app.css : plus rien ne pose
   data-theme=clair depuis que THEMES ne contient plus que 'sombre'. La ligne
   reste pour que le voile soit deja regle le jour ou le theme clair revient. */
html[data-theme=clair] .fondpage{--v1:94%;--v2:98%;--vu:96%}

/* LE VOILE. Une image derriere du texte n'est pas lisible : ce degrade n'est
   pas un reglage, c'est ce qui rend la page lisible. Plus dense en bas, la ou
   vivent les cartes ; l'image a le droit de se voir en haut.

   SA COULEUR EST --bg, LA COULEUR DE FOND DE LA PAGE, et non un rgba() ecrit
   a la main. C'est ce qui lui permet de suivre la page sans qu'on lui dise
   rien : les quatre feuilles du site declarent toutes --bg, et app.css la
   redefinit en theme clair. Le voile s'inverse donc tout seul, la ou il faut,
   et seulement la.

   Ecrit en rgba() fige, il fallait deux blocs de plus, un pour
   [data-theme=clair] et un pour la media query. Et surtout, ces deux blocs
   mentaient sur deux pages : accueil.php et les pages publiques n'ont pas de
   theme clair du tout, leur feuille ne le connait pas. Le jour ou l'une
   d'elles aurait recu un data-theme, son voile serait passe au clair pendant
   que ses cartes et son texte restaient sombres. */
.fondpage::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bg) var(--v1),transparent),
    color-mix(in srgb,var(--bg) var(--v2),transparent) 42%)}

/* LA VARIANTE UNIFORME.

   LA COUCHE EST EN position:fixed : son degrade est donc cale sur l'ECRAN et
   non sur le document, et sa bande claire reste en haut de l'ecran a tous les
   niveaux de defilement. Ce n'est pas un probleme quand le haut de l'ecran est
   occupe par la barre du site, ou quand le contenu vit dans des encarts au
   fond opaque. Ca en devient un sur les pages de TEXTE NU, mentions legales et
   confidentialite : leurs paragraphes sont poses directement sur la couche,
   dans une colonne etroite qui laisse l'image visible de chaque cote, et ils
   se retrouvent en permanence sur la partie la moins voilee.

   Ces pages-la prennent donc un voile constant, et un peu plus dense. */
.fondpage.uni::after{background:color-mix(in srgb,var(--bg) var(--vu),transparent)}

/* LE CORPS DEVIENT TRANSPARENT, sinon il masque la couche posee dessous : un
   element en z-index:-1 passe DERRIERE le fond de son propre corps de page.
   Les cartes, elles, gardent leur fond opaque : c'est ce qui rend le texte
   lisible quelle que soit l'image.

   Une classe, et non un body:has(> .fondpage) : sur un navigateur qui ne
   connait pas :has, la regle entiere est ignoree, le corps reste opaque et le
   fond disparait sans un mot. */
body.afond{background:transparent}