/* ============================================================
   LUMIA SUR LE SITE (22/10/2026) — voir lumia-site.js.
   Son corps (feu_follet.js) lit ses couleurs sur :root : les
   cinq teintes du spectre de la marque, le fond, le blanc du
   faisceau et l'encre. Ce sont celles de l'application
   (app/static/style.css), et celles du --rainbow de ce site.
   ============================================================ */
:root {
  --rainbow-1: #4fb6ff;
  --rainbow-2: #7d8bff;
  --rainbow-3: #b07bff;
  --rainbow-4: #ff7eb3;
  --rainbow-5: #ffb84f;
  --bg: #282b32;            /* = --fond-2 : son halo s'additionne sur le fond gris */
  --prism-white: #f8fbff;
  --txt: #ffffff;

  --lumia-z: 60;            /* au-dessus de la page, sous rien d'autre : elle ne prend aucun clic */
  --lumia-carte: rgba(255, 255, 255, 0.045);
  --lumia-carte-bord: rgba(255, 255, 255, 0.09);
}
:root[data-logo="noir"] { --bg: #1c1d20; }

/* Sa toile couvre la fenêtre et laisse passer tous les gestes. */
.lumia-toile {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
  pointer-events: none; z-index: var(--lumia-z);
}
/* Sa bulle, pour les lecteurs d'écran (la bulle visible est peinte dans sa toile). */
.lumia-voix {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* « Chut » : sous elle quand la main s'en approche, ou au clavier. */
.lumia-chut {
  position: fixed; left: 0; top: 0; z-index: calc(var(--lumia-z) + 1);
  font: 600 0.78rem/1 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 0.01em;
  color: var(--muted); background: rgba(26, 29, 35, 0.72);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.42rem 0.75rem;
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--ease), color 0.2s var(--ease);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lumia-chut.est-visible, .lumia-chut:focus-visible { opacity: 1; pointer-events: auto; }
.lumia-chut:hover, .lumia-chut:focus-visible { color: var(--text); }
.lumia-chut:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* Elle s'est tue : son bouton reste là où elle est, pour la rappeler. */
.lumia-chut.est-silence { opacity: 0.85; pointer-events: auto; }

/* Les gestes sur elle. */
html.lumia-survol, html.lumia-survol * { cursor: grab !important; }
html.lumia-tenue, html.lumia-tenue * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
/* Elle tient ta souris : le vrai curseur se cache, le faux est peint dans sa toile. */
html.lumia-tient-souris, html.lumia-tient-souris * { cursor: none !important; }

/* ============================================================
   LA SECTION « LUMIA T'AIDE POUR TOUT »
   ============================================================ */
.band.lumia { position: relative; }
.lumia-kicker { color: var(--muted); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.1rem; }
.lumia-aides {
  list-style: none; margin: clamp(2.4rem, 5vw, 3.6rem) auto 0; padding: 0;
  max-width: var(--max);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 1rem;
  text-align: left;
}
.lumia-aide {
  padding: 1.35rem 1.4rem 1.45rem;
  background: var(--lumia-carte); border: 1px solid var(--lumia-carte-bord); border-radius: 18px;
}
.lumia-aide h3 { font-size: 1.12rem; line-height: 1.25; letter-spacing: -0.015em; color: var(--text); margin: 0 0 0.5rem; }
.lumia-aide p { color: var(--body); font-size: 0.98rem; line-height: 1.55; margin: 0; }
.lumia-aide em { color: var(--text); font-style: normal; }
.lumia-conclusion { margin-top: clamp(2rem, 4vw, 2.8rem); }
.lumia-conclusion { text-align: center; }