/*
 * Charte graphique partagée, extraite de /index.html (page d'accueil semczyk.fr).
 * Toute mini-app sous /outils/ doit inclure ce fichier avant son propre style.css
 * pour rester visuellement cohérente avec le reste du site.
 */

:root {
  --color-bg: #0f1117;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-text-subtle: #cbd5e1;
  --color-accent-1: #3b82f6;
  --color-accent-2: #8b5cf6;
  --color-accent-gradient: linear-gradient(135deg, var(--color-accent-1), var(--color-accent-2));
  --color-card-bg: #1e2433;
  --color-border: #2d3748;
  --color-error: #f87171;
  --font-family-base: 'Segoe UI', system-ui, sans-serif;
  --font-family-mono: 'SFMono-Regular', Consolas, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-base);
  background: var(--color-bg);
  color: var(--color-text);
}

/*
 * Bandeau de navigation réutilisable pour toute page sous /outils/.
 * Usage : <nav class="tool-nav"><a href="/">← Accueil</a><a href="/outils/">Outils</a></nav>
 * Liens en root-relative (/, /outils/) et non relatifs, quelle que soit la profondeur de la page.
 */
.tool-nav {
  display: flex;
  gap: 1rem;
  max-width: 640px;
  margin: 1.5rem auto 0;
  padding: 0 1rem;
}

.tool-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}

.tool-nav a:hover {
  color: var(--color-accent-1);
}