/* HMS — le décor du fond (26/10/2026, Odor : « j'aime pas le fond d'écran neutre du site »). Cinq décors au choix
   (Paramètres → Fond du site, retenu sur l'appareil), tous dans les couleurs du thème :
     aurore    : grandes lueurs colorées qui dérivent + voile d'aurore boréale (par défaut) ;
     nebuleuse : espace profond, nébuleuses et étoiles ;
     neon      : horizon lumineux et grille au sol, façon années 80 futuristes ;
     cinema    : les affiches à la une, floutées, qui se succèdent derrière le site ;
     sobre     : l'ancien fond, très discret.
   Seules des transformations sont animées (calculées par la carte graphique) : fluide aussi sur téléphone. */

.decor { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; background: var(--fond-nuit); contain: strict; }
.decor > * { position: absolute; display: none; }
.decor .ombre { display: block; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 35%, color-mix(in srgb, var(--fond-nuit) 75%, transparent) 100%); }

/* les lueurs : des dégradés déjà doux, sans flou (rien à recalculer pendant l'animation) */
.decor i { border-radius: 50%; will-change: transform; mix-blend-mode: screen; opacity: .62; }
.decor .b1 { width: 70vmax; height: 70vmax; left: -22vmax; top: -28vmax; background: radial-gradient(circle, rgba(var(--fond-1), .95) 0%, rgba(var(--fond-1), .35) 32%, transparent 66%); animation: decor-1 28s ease-in-out infinite alternate; }
.decor .b2 { width: 64vmax; height: 64vmax; right: -24vmax; top: -16vmax; background: radial-gradient(circle, rgba(var(--fond-2), .95) 0%, rgba(var(--fond-2), .35) 32%, transparent 66%); animation: decor-2 34s ease-in-out infinite alternate; }
.decor .b3 { width: 60vmax; height: 60vmax; left: 12vmax; bottom: -34vmax; background: radial-gradient(circle, rgba(var(--fond-3), .9) 0%, rgba(var(--fond-3), .3) 32%, transparent 66%); animation: decor-3 40s ease-in-out infinite alternate; }
.decor .b4 { width: 40vmax; height: 40vmax; right: 4vmax; bottom: -14vmax; background: radial-gradient(circle, rgba(var(--fond-4), .85) 0%, rgba(var(--fond-4), .25) 34%, transparent 66%); opacity: .45; animation: decor-4 46s ease-in-out infinite alternate; }
@keyframes decor-1 { to { transform: translate(22vmax, 14vmax) scale(1.18); } }
@keyframes decor-2 { to { transform: translate(-18vmax, 20vmax) scale(.9); } }
@keyframes decor-3 { to { transform: translate(20vmax, -16vmax) scale(1.12); } }
@keyframes decor-4 { to { transform: translate(-26vmax, -10vmax) scale(1.25); } }

/* le voile d'aurore boréale : un ruban de couleurs qui tourne lentement */
.decor .voile {
  inset: -30%; opacity: .5; mix-blend-mode: screen;
  background: conic-gradient(from 200deg at 50% 115%, transparent 0deg, rgba(var(--fond-1), .32) 40deg, rgba(var(--fond-2), .38) 75deg, rgba(var(--fond-3), .3) 110deg, transparent 150deg, transparent 360deg);
  -webkit-mask-image: linear-gradient(to bottom, transparent 5%, #000 45%, transparent 90%); mask-image: linear-gradient(to bottom, transparent 5%, #000 45%, transparent 90%);
  animation: decor-voile 60s ease-in-out infinite alternate;
}
@keyframes decor-voile { from { transform: rotate(-14deg) scale(1.05); } to { transform: rotate(16deg) scale(1.2); } }

:root[data-fond="aurore"] .decor i, :root[data-fond="aurore"] .decor .voile { display: block; }

/* nébuleuse : des nuages plus petits et plus denses, tout tourne lentement, beaucoup d'étoiles */
:root[data-fond="nebuleuse"] .decor i { display: block; opacity: .5; }
:root[data-fond="nebuleuse"] .decor .b1 { width: 46vmax; height: 46vmax; left: 8vmax; top: 6vmax; }
:root[data-fond="nebuleuse"] .decor .b2 { width: 40vmax; height: 40vmax; right: 6vmax; top: 22vmax; }
:root[data-fond="nebuleuse"] .decor .b3 { width: 36vmax; height: 36vmax; left: 30vmax; bottom: -6vmax; }
:root[data-fond="nebuleuse"] .decor { animation: decor-tourne 240s linear infinite; inset: -25%; }
@keyframes decor-tourne { to { transform: rotate(360deg); } }
:root[data-fond="nebuleuse"] #etoiles { opacity: .95; }

/* néon : un soleil couchant derrière l'horizon, une grille au sol bien visible */
:root[data-fond="neon"] .decor .soleil {
  display: block; left: 50%; bottom: 30vh; width: 46vmin; height: 46vmin; transform: translateX(-50%); border-radius: 50%;
  background: linear-gradient(180deg, rgb(var(--fond-4)) 0%, rgb(var(--fond-3)) 55%, rgb(var(--fond-2)) 100%);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 20px); mask-image: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 20px);
  box-shadow: 0 0 120px 30px rgba(var(--fond-3), .45); opacity: .85; animation: decor-soleil 6s ease-in-out infinite alternate;
}
@keyframes decor-soleil { to { opacity: 1; filter: saturate(1.3); } }
:root[data-fond="neon"] .decor .b2 { display: block; opacity: .35; }
:root[data-fond="neon"] .decor .ombre { background: linear-gradient(0deg, color-mix(in srgb, var(--fond-nuit) 20%, transparent) 0 30vh, transparent 30vh), radial-gradient(120% 90% at 50% 40%, transparent 40%, color-mix(in srgb, var(--fond-nuit) 80%, transparent) 100%); }
:root[data-fond="neon"] .sol { display: block !important; opacity: .55; height: 32vh; background-image: linear-gradient(rgba(var(--fond-3), .7) 2px, transparent 2px), linear-gradient(90deg, rgba(var(--fond-1), .55) 2px, transparent 2px); }

/* cinéma : les affiches à la une, floutées, qui se succèdent */
:root[data-fond="cinema"] .decor .cine { display: block; inset: -6%; background: center / cover no-repeat; filter: blur(22px) saturate(1.35) brightness(.5); transform: scale(1.08); transition: opacity 2s ease, background-image 0s; animation: ken-burns 30s ease-in-out infinite alternate; }
:root[data-fond="cinema"] .decor .b2, :root[data-fond="cinema"] .decor .b3 { display: block; opacity: .22; }

/* sobre : l'ancien fond (le dessin du canevas) */
:root[data-fond="sobre"] .decor { display: none; }
:root:not([data-fond="sobre"]) #fond { display: none; }

/* thème clair : des lueurs plus douces */
:root[data-theme="clair"] .decor i, :root[data-theme="clair"] .decor .voile { mix-blend-mode: multiply; opacity: .28; }

/* le sol lumineux se voit aussi sur téléphone, en plus léger */
@media (max-width: 560px) { :root[data-fond="aurore"] .sol, :root[data-fond="nebuleuse"] .sol { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .decor, .decor * { animation: none !important; }
}

/* Paramètres : le choix du fond */
.fonds-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; width: 100%; }
.fond-choix { display: grid; gap: 6px; padding: 8px; border-radius: 14px; border: 1px solid var(--trait); background: var(--surface); color: var(--encre); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.fond-choix i { display: block; height: 54px; border-radius: 10px; }
.fond-choix[aria-pressed="true"] { border-color: rgb(var(--lueur)); box-shadow: 0 0 0 2px rgba(var(--lueur), .35), 0 0 18px -4px rgba(var(--lueur), .8); }
.fond-choix small { color: var(--doux); font-weight: 500; font-size: .75rem; }