/* ==========================================================================
   THÈMES VISUELS (fonds « Ruban » et « Courants ») : fichier AUTONOME.
   Choix de Nicolas, 2026-10-29 : le fond d'écran n'a aucun rapport avec le contenu, il ne doit jamais casser.

   Règles pour ne pas le casser :
   1. Tout ce qui est propre aux thèmes porte le préfixe  --th-  (variables) ou  th-  (classes). Aucun autre fichier
      (style.css, app.js, cours.css…) ne lit ni n'écrit ces noms. (Cause de la casse de 1.19.x : la variable --fh servait à la fois
      à l'image du fond et à la hauteur des filtres, écrite par app.js. Le test test/themes.test.mjs l'interdit.)
   2. Le fond est dessiné par body::before (haut) et body::after (bas), position: fixed, z-index: -1, derrière tout le contenu.
      Le contenu n'a besoin de rien : il garde ses propres fonds.
   3. Seule dépendance au contenu, regroupée tout en bas (« Transparences ») : les barres collantes deviennent translucides.
   4. Activation par l'attribut  data-style  de <html> (posé par menu.js) ; sans lui, ce fichier ne fait rien.
   5. Interrupteur général : THEMES_ENABLED dans site/menu.js.
   Fonds (images dans fonds/) : téléphone ≤ 720 px = r2/c3 ; ordinateur = r3/c4. Vérification : npm test (test/themes*.test.mjs).
   ========================================================================== */

:root {
  --th-opacite: .42;
  --th-haut-h: clamp(140px, 17vw, 340px);
  --th-bas-h: clamp(180px, 24vw, 460px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) { --th-opacite: .6; }
}
:root[data-theme="sombre"] { --th-opacite: .6; }
:root[data-theme="clair"] { --th-opacite: .42; }

/* Images, par style (ordinateur, puis téléphone) */
:root[data-style="ruban"] { --th-haut: url(fonds/r3-haut.webp); --th-bas: url(fonds/r3-bas.webp); }
:root[data-style="courants"] { --th-haut: url(fonds/c4-haut.webp); --th-bas: url(fonds/c4-bas.webp); }
@media (max-width: 720px) {
  :root[data-style="ruban"] { --th-haut: url(fonds/r2-haut.webp); --th-bas: url(fonds/r2-bas.webp); }
  :root[data-style="courants"] { --th-haut: url(fonds/c3-haut.webp); --th-bas: url(fonds/c3-bas.webp); }
}

/* Deux rubans fixes, un en haut et un en bas de l'écran, à taille indépendante de la hauteur visible
   (la barre d'adresse du téléphone ne les déplace pas). */
:root[data-style] body::before, :root[data-style] body::after {
  content: ""; position: fixed; left: 0; right: 0; z-index: -1; pointer-events: none;
  background: center / cover no-repeat; opacity: var(--th-opacite);
}
:root[data-style] body::before { top: 0; height: var(--th-haut-h); background-image: var(--th-haut); }
:root[data-style] body::after { bottom: 0; height: var(--th-bas-h); background-image: var(--th-bas); }
@supports (height: 100lvh) { :root[data-style] body::after { bottom: auto; top: calc(100lvh - var(--th-bas-h)); } }

/* Aperçu dans le bouton de choix de style (Paramètres) */
.theme-pick .theme-style { background: var(--bg); }
.theme-pick .theme-style::before { content: ""; position: absolute; inset: 0; opacity: var(--th-opacite); background-repeat: no-repeat; background-image: var(--th-haut), var(--th-bas); background-size: 100% 60%, 100% 60%; background-position: center top, center bottom; }
.theme-pick .theme-style[data-v="sobre"]::before { display: none; }
.theme-pick .theme-style:hover { background: var(--bg); filter: brightness(.97); }

/* Transparences : seule partie qui touche au contenu. Ce que les thèmes rendent translucide pour laisser voir le fond. */
:root[data-style] .top { background: transparent; }
:root[data-style] .filters { background: transparent; border-bottom-color: transparent; }
:root[data-style] .filters.is-stuck { background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(6px); border-bottom-color: var(--line); }
:root[data-style] .selbar, :root[data-style] #minibar { background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(6px); }
:root[data-style] #list .day h2 { background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(6px); }