/* Thème sombre des pages publiques. Uniquement les jetons de tokens.css.
   La classe public-night est absente de WattsMonde et de l'admin. */

body.public-night {
  background: var(--bg);
  color: var(--ink);
  color-scheme: dark;
  scroll-padding-top: 88px;
}

body.public-night :is(h1, h2, h3, h4, [id]) {
  scroll-margin-top: 88px;
}

body.public-night main,
body.public-night .app-container {
  background: var(--bg);
  color: var(--ink);
}

@media (max-width: 768px) {
  body.public-night.home-agades .app-container > main {
    padding-top: 64px;
  }

  body.public-night .home-brand {
    display: none;
  }
}

body.public-night[data-section="tech"]::after {
  content: none;
}

body.public-night :is(
  .bg-white,
  .bg-gray-50,
  .bg-gray-100,
  .bg-gray-200,
  .bg-slate-50,
  .bg-slate-100,
  .bg-slate-200,
  .bg-zinc-50,
  .bg-zinc-100,
  .bg-neutral-50,
  .bg-neutral-100,
  .bg-stone-50,
  .bg-stone-100,
  .bg-cream,
  .bg-cream-light,
  .feature-card,
  .faq-item,
  .faq-question,
  .faq-answer
) {
  background-color: var(--panel) !important;
  color: var(--ink);
}

body.public-night.bg-white,
body.public-night .page-404 {
  background-color: var(--bg) !important;
  color: var(--ink);
}

body.public-night :is(
  .text-black,
  .text-gray-900,
  .text-gray-800,
  .text-gray-700,
  .text-slate-900,
  .text-slate-800,
  .text-slate-700,
  .text-zinc-900,
  .text-neutral-900,
  .text-stone-900,
  .text-dark
) {
  color: var(--ink) !important;
}

body.public-night :is(
  .text-gray-600,
  .text-gray-500,
  .text-gray-400,
  .text-slate-600,
  .text-slate-500,
  .text-slate-400,
  .text-zinc-500,
  .text-neutral-500,
  .text-neutral-600,
  .text-stone-500,
  .text-gray
) {
  color: var(--mute) !important;
}

body.public-night :is(
  .text-turquoise-dark,
  .text-turquoise-500,
  .text-turquoise-600
) {
  color: var(--teal) !important;
}

body.public-night :is(
  .border-gray-100,
  .border-gray-200,
  .border-gray-300,
  .border-slate-200,
  .border-slate-300,
  .border-neutral-200
) {
  border-color: var(--line2) !important;
}

body.public-night :is(.hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover, .hover\:bg-gray-200:hover, .hover\:bg-slate-100:hover) {
  background-color: var(--bg2) !important;
}

body.public-night :is(
  .prose,
  .article-prose,
  .prose-rendered,
  .bd-content-wrapper,
  .post-content,
  .in-prose
) {
  color: var(--ink);
}

body.public-night :is(.prose, .in-prose) :is(p, li, blockquote),
body.public-night :is(.article-prose, .prose-rendered) :is(p, li, blockquote),
body.public-night :is(.cours-body, .ch) :is(p, li, dd),
body.public-night .bd-content-wrapper p {
  max-width: 68ch;
}

body.public-night :is(.prose, .article-prose, .prose-rendered, .in-prose, .bd-content-wrapper) :is(h1, h2, h3, h4, strong, b) {
  color: var(--ink);
}

body.public-night :is(.prose, .article-prose, .prose-rendered, .cours-body, .ch, .in-prose, .bd-content-wrapper) a {
  color: var(--sig);
  text-decoration-color: var(--sig);
}

body.public-night :is(
  .cours-body,
  .ch,
  .article-prose,
  .prose-rendered,
  .post-content,
  .bd-content-wrapper,
  .in-prose,
  .page-404-image,
  .comic-viewer-image-container
) img {
  background: var(--ink);
  padding: 8px;
  border: 1px solid var(--line2);
  box-sizing: border-box;
}

body.public-night :is(table, .ch-tab, .faq-answer) {
  color: var(--ink);
  border-color: var(--line2);
}

body.public-night :is(th, td) {
  border-color: var(--line2);
}

body.public-night :is(
  input,
  textarea,
  select
):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]) {
  background-color: var(--panel);
  color: var(--ink);
  border-color: var(--line2);
}

body.public-night :is(input, textarea)::placeholder,
body.public-night .text-gray-700::placeholder {
  color: var(--mute) !important;
  opacity: 1;
}

body.public-night .site-footer .sf-news {
  background: var(--panel);
  border-color: var(--line2);
}

body.public-night .site-footer .sf-news input {
  color: var(--ink);
  background: transparent;
}

body.public-night .site-footer .sf-news button {
  background: var(--sig);
  color: #111419;
  border-left-color: var(--line2);
}

body.public-night :is(.bg-turquoise-500, .bg-turquoise-600, .hover\:bg-turquoise-600:hover) {
  background-color: var(--teal) !important;
  color: #111419 !important;
}

body.public-night :is(input, textarea, select, button, a):focus-visible {
  outline: 2px solid var(--sig);
  outline-offset: 2px;
}

body.public-night .admin-login-surface {
  --admin-surface: var(--bg);
  --admin-surface-raised: var(--panel);
  --admin-surface-sunken: var(--bg2);
  --admin-ink: var(--ink);
  --admin-ink-soft: var(--ink);
  --admin-ink-muted: var(--mute);
  --admin-ink-faint: var(--mute);
  --admin-rule: var(--line2);
  --admin-rule-strong: var(--line2);
  --admin-accent: var(--sig);
  --admin-accent-ink: #111419;
  background: var(--bg) !important;
  color: var(--ink);
}

body.public-night .admin-login-card,
body.public-night .admin-login-title {
  color: var(--ink);
}

body.public-night .admin-login-copy {
  color: var(--mute);
}

body.public-night .admin-btn--primary {
  background: var(--sig);
  color: #111419;
  border-color: var(--sig);
}

body.public-night ::selection {
  background: var(--sig);
  color: #111419;
}

@media (prefers-reduced-motion: reduce) {
  body.public-night,
  body.public-night *,
  body.public-night *::before,
  body.public-night *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}