/* Accessibilité progressive: contraste, focus visible et thème clair/sombre. */
:root {
  --ly-page-bg: #050805;
  --ly-panel-bg: rgba(0, 0, 0, .88);
  --ly-panel-border: rgba(255, 255, 255, .72);
  --ly-text: #f8fff8;
  --ly-muted: #dfffe0;
  --ly-accent: #00ff41;
  --ly-accent-strong: #66ff82;
  --ly-control-bg: #050505;
  --ly-control-text: #ffffff;
  --ly-outline: #ffffff;
  --ly-shadow: #000000;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ly-page-bg: #f4fff6;
    --ly-panel-bg: rgba(255, 255, 255, .94);
    --ly-panel-border: rgba(0, 90, 30, .45);
    --ly-text: #061406;
    --ly-muted: #153f1e;
    --ly-accent: #006b24;
    --ly-accent-strong: #004f1b;
    --ly-control-bg: #ffffff;
    --ly-control-text: #071607;
    --ly-outline: #ffffff;
    --ly-shadow: rgba(255, 255, 255, .96);
  }
}

:root[data-theme="light"] {
  --ly-page-bg: #f4fff6;
  --ly-panel-bg: rgba(255, 255, 255, .94);
  --ly-panel-border: rgba(0, 90, 30, .45);
  --ly-text: #061406;
  --ly-muted: #153f1e;
  --ly-accent: #006b24;
  --ly-accent-strong: #004f1b;
  --ly-control-bg: #ffffff;
  --ly-control-text: #071607;
  --ly-outline: #ffffff;
  --ly-shadow: rgba(255, 255, 255, .96);
}

:root[data-theme="dark"] {
  --ly-page-bg: #050805;
  --ly-panel-bg: rgba(0, 0, 0, .88);
  --ly-panel-border: rgba(255, 255, 255, .72);
  --ly-text: #f8fff8;
  --ly-muted: #dfffe0;
  --ly-accent: #00ff41;
  --ly-accent-strong: #66ff82;
  --ly-control-bg: #050505;
  --ly-control-text: #ffffff;
  --ly-outline: #ffffff;
  --ly-shadow: #000000;
}

html,
body {
  background: var(--ly-page-bg);
  color: var(--ly-text);
}

.header,
.contact,
.projets,
.home .projects .preview-card,
.authentication {
  background: var(--ly-panel-bg) !important;
  border: 1px solid var(--ly-panel-border);
  color: var(--ly-text) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 12px 32px rgba(0, 0, 0, .22);
}

.header,
.header h1,
.header h2,
.header a,
.header button,
.home h1,
.home p,
.contact,
.contact h2,
.footer,
.footer a,
.projets,
.authentication {
  color: var(--ly-text) !important;
  text-shadow:
    -1px -1px 0 var(--ly-outline),
    1px -1px 0 var(--ly-outline),
    -1px 1px 0 var(--ly-outline),
    1px 1px 0 var(--ly-outline),
    0 2px 3px var(--ly-shadow);
}

:root[data-theme="dark"] .header,
:root[data-theme="dark"] .header h1,
:root[data-theme="dark"] .header h2,
:root[data-theme="dark"] .header a,
:root[data-theme="dark"] .header button,
:root[data-theme="dark"] .home h1,
:root[data-theme="dark"] .home p,
:root[data-theme="dark"] .contact,
:root[data-theme="dark"] .contact h2,
:root[data-theme="dark"] .footer,
:root[data-theme="dark"] .footer a,
:root[data-theme="dark"] .projets,
:root[data-theme="dark"] .authentication {
  color: var(--ly-accent) !important;
}

.home .filters select,
.home .filters button,
.contact__buttons .contact__button,
.contact__send,
.contact__textarea textarea,
.contact__textarea input,
.contact__textarea select,
.contact__form textarea,
.contact__form input,
.contact__form select,
.projets form input,
.projets form textarea,
.projets form select,
.projets form button,
.authentication form input,
.authentication form button {
  background: var(--ly-control-bg) !important;
  color: var(--ly-control-text) !important;
  border-color: var(--ly-accent-strong) !important;
}

.contact__textarea textarea::placeholder,
.contact__textarea input::placeholder,
.contact__form textarea::placeholder,
.contact__form input::placeholder,
.projets form input::placeholder,
.projets form textarea::placeholder {
  color: var(--ly-muted) !important;
  opacity: 1;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ly-outline);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--ly-accent-strong) !important;
}

.theme-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  min-width: 118px;
  min-height: 44px;
  padding: 10px 14px;
  border: 2px solid var(--ly-accent-strong);
  border-radius: 6px;
  background: var(--ly-control-bg);
  color: var(--ly-control-text);
  font: 700 .92rem Arial, sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}

.theme-toggle:hover {
  background: var(--ly-accent-strong);
  color: #000;
}

@media (max-width: 480px) {
  #root {
    margin: 0;
    padding: 1rem;
  }

  .theme-toggle {
    right: 10px;
    bottom: 10px;
    min-width: 104px;
    font-size: .82rem;
  }
}