/* Le thème sombre hors de l'accueil : les pages écrites en utilitaires Tailwind
   suivent les jetons monochromes de sombre.css (fond → --noir, surface → --panneau,
   bordure → --ligne-forte, secondaire → --doux, accent → --accent).
   Les jetons restent dans main pour ne pas recolorer les marques des documents.
   Les couleurs d'avertissement (ambre) et d'erreur (rouge) gardent leur teinte :
   ce sont des états, pas des accents. */
.identite-jfb.theme-sombre {
  color-scheme: dark;
}

.identite-jfb.theme-sombre main {
  --color-gray-50: var(--charbon);
  --color-gray-100: var(--charbon);
  --color-gray-200: var(--ligne-forte);
  --color-gray-300: var(--discret);
  --color-gray-400: var(--discret);
  --color-gray-500: var(--doux);
  --color-gray-600: var(--doux);
  --color-gray-700: var(--doux);
  --color-gray-800: var(--blanc);
  --color-gray-900: var(--blanc);
  --color-stone-50: var(--panneau);
  --color-stone-100: var(--charbon);
  --color-stone-200: var(--charbon);
  --color-stone-300: var(--ligne-forte);
  --color-stone-600: var(--doux);
  --color-stone-700: var(--doux);
  --color-stone-800: var(--blanc);
  --color-teal-50: color-mix(in srgb, var(--accent) 12%, var(--panneau));
  --color-teal-200: color-mix(in srgb, var(--accent) 45%, var(--panneau));
  --color-teal-300: color-mix(in srgb, var(--accent) 45%, var(--panneau));
  --color-teal-700: var(--accent);
  --color-teal-800: color-mix(in srgb, var(--accent) 80%, var(--blanc));
  --color-teal-900: color-mix(in srgb, var(--accent) 60%, var(--blanc));
  --color-amber-50: #332711;
  --color-amber-300: #b69a54;
  --color-amber-600: #d4b56f;
  --color-amber-800: #ffe0a3;
  --color-amber-900: #ffe0a3;
  --color-red-50: #3c2028;
  --color-red-300: #b37e88;
  --color-red-700: #ff9bb0;
  --color-red-800: #ffbdc8;
  --color-red-900: #ffbdc8;
}

.identite-jfb.theme-sombre main .bg-white {
  background-color: var(--interface-surface);
}

.identite-jfb.theme-sombre main .hover\:bg-gray-100:hover,
.identite-jfb.theme-sombre main .hover\:bg-gray-50:hover,
.identite-jfb.theme-sombre main .hover\:bg-stone-50:hover {
  background-color: var(--charbon);
}

.identite-jfb.theme-sombre main :is(input, textarea, select) {
  color: var(--interface-encre);
  accent-color: var(--interface-accent);
}

.identite-jfb.theme-sombre main :is(input, textarea)::placeholder {
  color: var(--interface-secondaire);
  opacity: 1;
}

.identite-jfb.theme-sombre main :is(.bg-teal-700, .bg-teal-800, .bg-teal-900) {
  background: var(--accent);
  color: var(--accent-encre);
  border-color: var(--accent);
}

.identite-jfb.theme-sombre main :is(a, button, input):is(.bg-teal-700, .bg-teal-800, .bg-teal-900):hover {
  background: color-mix(in srgb, var(--accent) 80%, var(--blanc));
}

.identite-jfb.theme-sombre main :is(a, button, summary, input, select, textarea):focus-visible {
  outline-color: var(--accent);
}

.identite-jfb.theme-sombre main .bg-teal-700:focus-visible {
  outline-color: var(--blanc);
}

/* Les contrôles natifs et les supports de scan gardent leurs propres contrastes. */
.identite-jfb.theme-sombre main input[type="file"]::file-selector-button {
  border-color: var(--discret);
  background-color: var(--charbon);
  color: var(--blanc);
}

.identite-jfb.theme-sombre main input[type="file"]::file-selector-button:hover {
  background-color: var(--ligne-forte);
}

.identite-jfb.theme-sombre main [data-code-qr] {
  background: #fff;
  color: #000;
  color-scheme: light;
}

.identite-jfb.theme-sombre main :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], textarea, select) {
  border-color: var(--discret);
  background-color: var(--noir);
}

.identite-jfb.theme-sombre main [data-interrupteur-target="pastille"] {
  background-color: var(--blanc);
}