/* neoria-v1. Igloo : masse, voile, Fraunces. */
/* Le html du module n'a pas data-theme. On repose les jetons sombres du socle. */

html:not([data-theme="clair"]) {
  color-scheme: dark;
  --bg: #12141a;
  --bg-elev: #1c1f27;
  --bg-mute: #0b0d11;
  --fg: #e8eaef;
  --fg-mute: #a8aeb8;
  --fg-faint: #7a808c;
  --line: #2c313a;
  --accent: #3ddbb0;
  --accent-fg: #06231c;
  --ok: #6fbf88;
  --warn: #d4783a;
  --danger: #e07070;
  --veil: rgba(18, 20, 26, 0.9);
}

.demo-page {
  background: var(--bg-mute);
  color: var(--fg);
}

.demo-fixe {
  background: var(--veil);
  backdrop-filter: none;
}

.demo-fixe .tete {
  background: transparent;
  border-bottom-color: var(--line);
}

.demo-honnete {
  background: transparent;
  border-bottom-color: var(--line);
  color: var(--fg-mute);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}

.demo {
  max-width: 64rem;
  padding-top: 2.75rem;
  padding-bottom: 5rem;
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    var(--veil) 28%,
    var(--veil) 100%
  );
}

.demo__intro,
.demo__fil {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.demo__titre {
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  word-spacing: 0.14em;
  font-kerning: none;
}

.demo__lede {
  max-width: 42ch;
  color: var(--fg);
}

.demo-grille {
  gap: 1.15rem;
}

.demo-carte {
  min-height: 14rem;
  padding: 1.35rem 1.25rem 1.4rem;
  background: var(--bg-elev);
  border-color: var(--line);
}

.demo-carte__titre {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  word-spacing: 0.12em;
}

.demo-fil {
  min-height: 12rem;
  padding: 1rem 0.85rem 1.15rem;
  background: var(--bg-mute);
  border: 1px solid var(--line);
}

.demo-msg {
  background: var(--veil);
  border-color: var(--line);
}

.demo-msg--visiteur {
  background: var(--bg-elev);
}

.demo-msg--hors {
  background: var(--bg-mute);
  color: var(--fg-mute);
}

.demo-choix__btn {
  background: var(--bg-elev);
  border-color: var(--line);
  color: var(--fg);
}

.demo-saisie input {
  background: var(--bg-elev);
  border-color: var(--line);
  color: var(--fg);
}

.livrable {
  background: var(--veil);
  border-color: var(--line);
  padding: 1.4rem 1.25rem 1.55rem;
}

.livrable__titre {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  letter-spacing: 0.02em;
  word-spacing: 0.14em;
}

.livrable__quand {
  background: var(--bg-mute);
  border-color: var(--line);
}

#demo-porte.demo-porte {
  margin-top: 1.25rem;
  padding: 1.4rem 1.25rem 1.55rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
}

.demo-porte__phrase {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: 0.02em;
  word-spacing: 0.12em;
  max-width: 22ch;
  color: var(--fg);
}

.demo-porte__neo {
  color: var(--fg);
  text-decoration: underline;
}

.demo-porte__neo:hover,
.demo-porte__neo:focus-visible {
  color: var(--fg);
}