/* Socle commun à toutes les pages d'outil : couleurs, typographie, liens,
   boutons principaux et discrets, cadre de la section Transparency.

   Chargé AVANT le style.css de l'outil, qui ne garde que ce qui lui est
   propre et peut redéfinir n'importe quelle règle d'ici (même spécificité,
   déclarée plus tard : c'est la sienne qui l'emporte). Partager le CSS
   d'interface entre outils est permis depuis le 28/09 (décision d'Arnaud) ;
   la logique de chaque outil reste dans son dossier.

   Une règle n'entre ici que si elle ne change l'affichage d'AUCUN outil :
   chaque outil la possédait déjà à l'identique, ou n'a aucun élément
   qu'elle vise, ou la redéfinit entièrement. Les champs et boutons du
   gabarit récent sont dans formulaire.css. tests/commun-styles.test.js
   vérifie qu'aucun style.css d'outil ne recopie une règle d'ici. */

:root {
  --fond: #0a0c0d;
  --surface: #111517;
  --filet: #1f262a;
  --texte: #d6dde0;
  --discret: #7d898f;
  --accent: #3ddc84;
  --attention: #e5b454;
  --faible: #e5736b;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", "DejaVu Sans Mono", monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

h1 {
  margin: 12px 0 8px;
  font-size: 1.4rem;
  font-weight: 500;
}

.chapeau {
  margin: 0 0 24px;
  color: var(--discret);
  font-size: 0.9rem;
}

/* --- Réglages -------------------------------------------------------------- */

.options { display: grid; gap: 16px; }

.aide {
  margin: 0;
  color: var(--discret);
  font-size: 0.8rem;
}

.alerte { color: var(--attention); }
.erreur { color: var(--faible); }

.bouton:hover { background: rgba(61, 220, 132, 0.08); }
.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bouton.principal { background: var(--accent); color: var(--fond); font-weight: 600; }
.bouton.principal:hover { background: #5fe59b; }
.bouton.principal:disabled { background: var(--filet); color: var(--discret); }

.bouton.discret { border-color: var(--filet); color: var(--discret); }
.bouton.discret:hover { color: var(--texte); background: none; }

.lecteur {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Transparence ---------------------------------------------------------- */

.transparence {
  margin-top: 40px;
  padding: 16px 18px;
  border: 1px solid var(--filet);
  border-radius: 10px;
  font-size: 0.85rem;
}

.transparence p { margin: 0 0 12px; }
.transparence dl { margin: 0; }
.transparence dt { margin-top: 12px; color: var(--texte); }
.transparence dd { margin: 2px 0 0; color: var(--discret); }
.transparence .fichiers { margin: 4px 0 0; padding-left: 1.2em; }