/* Couche portable : copier ce fichier et le charger APRÈS les thèmes.
   API : --read-bg, --read-surface, --read-text, --read-muted,
   --read-border, --read-link, --read-focus. Aucun JS ni dépendance. */
:root {
  --read-bg: #f5f7fa;
  --read-surface: #ffffff;
  --read-text: #172033;
  --read-muted: #3c4a60;
  --read-border: #8795a9;
  --read-link: #004f98;
  --read-focus: #005fcc;
}
html[data-theme="void"] {
  --read-bg: #101724;
  --read-surface: #1c2738;
  --read-text: #f5f8ff;
  --read-muted: #d0dbea;
  --read-border: #8a9bb2;
  --read-link: #90d6ff;
  --read-focus: #ffe08a;
}
/* Lisibilité avant les effets : fond opaque, police à taille confortable. */
.app-main { color: var(--read-text); font-size: 1rem; line-height: 1.65; }
.app-main :is(p, li, .tool-card__desc, .tools-notice) { line-height: 1.65; }
.app-main :is(h1, h2, h3, .section-title) { line-height: 1.25; letter-spacing: normal; }
.app-main :is(a, button):focus-visible, .theme-selector button:focus-visible {
  outline: 3px solid var(--read-focus); outline-offset: 3px;
}
.app-main .tools-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.app-main .tool-card, .app-main .tools-notice {
  background: var(--read-surface); color: var(--read-text);
  border: 1px solid var(--read-border); box-shadow: 0 2px 10px #00000016;
  backdrop-filter: none; text-shadow: none;
}
.app-main .tool-card { border-radius: 0.9rem; padding: 1.25rem; min-width: 0; }
.app-main .tool-card__name { color: var(--read-text); font-size: 1.1rem; }
.app-main .tool-card__desc { color: var(--read-muted); font-size: 1rem; }
.app-main .tool-card__url { color: var(--read-link); font-size: .9rem; overflow-wrap: anywhere; }
.app-main .tool-card:not(.tool-card--no-link):hover,
.app-main .tool-card:not(.tool-card--no-link):focus-visible {
  border-color: var(--read-focus); transform: translateY(-2px);
}
.app-main .tool-card--no-link { cursor: default; }
.app-main .badge { font-size: .78rem; letter-spacing: .02em; }
.app-main .badge--tailnet { color: #064b88; background: #e3f2ff; border-color: #78a8d5; }
.app-main .badge--actif { color: #0c5a34; background: #ddf7e9; border-color: #83c5a1; }
.app-main .badge--unhealthy { color: #9b2424; background: #fff0ee; border-color: #d58d87; }
html[data-theme="void"] .app-main .badge--tailnet { color: #e3f2ff; background: #18466b; }
html[data-theme="void"] .app-main .badge--actif { color: #dfffea; background: #145237; }
html[data-theme="void"] .app-main .badge--unhealthy { color: #ffe6e2; background: #632825; }
@media (max-width: 640px) {
  .app-main { padding-inline: 1rem; }
  .app-main .tools-grid { grid-template-columns: minmax(0, 1fr); }
  .app-main .tool-card { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .app-main *, .app-main *::before, .app-main *::after,
  .theme-decorations, .theme-scenes { animation: none !important; transition: none !important; transform: none !important; }
  .theme-decorations, .theme-scenes { display: none !important; }
}