/* === RESET === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* Les contrôles n'héritent pas de la police par défaut : on uniformise sur DM Sans (corps)
   pour que TOUS les boutons/champs aient la même typo (sinon police système sur certains). */
button, input, select, textarea { font-family: inherit; }
/* Pas de flash bleu/gris au tap sur mobile (feel natif). */
a, button, summary, label, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* [hidden] doit toujours l'emporter (sinon .login-view { display:grid } le masque pas). */
[hidden] { display: none !important; }

/* === UTILITAIRES réutilisables === */
/* Masque la scrollbar (Firefox + WebKit) tout en gardant le scroll. À poser sur tout conteneur scrollable. */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

html { font-size: 16px; scroll-padding-top: var(--header-height); }

body {
  font-family: var(--font-text);
  font-size: clamp(14px, 1.5vw + 0.5rem, 18px);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-height);
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3 { font-family: var(--font-title); color: var(--text-primary); line-height: 1.2; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; margin-bottom: 0.25rem; }
h3 { font-size: 1.05rem; margin: 1rem 0 0.35rem; }

a { color: inherit; text-decoration: none; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--accent-muted); color: var(--accent);
  padding: 0.1em 0.4em; border-radius: var(--radius-xs); font-size: 0.9em;
}
.muted { color: var(--text-secondary); font-size: 0.92em; }
.card > .muted { margin-bottom: 1rem; } /* respire entre l'intro et le contenu */

/* Bouton d'action icône-seule (éditer/supprimer d'une ligne). Réutilisable ; toujours avec aria-label.
   Sans bordure, pastille ronde discrète au survol (fond muté). Cible tactile 40px (WCAG 2.5.8). */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: 50%;
  background: transparent; color: var(--text-secondary); cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.icon-btn svg { width: 16px; height: 16px; display: block; }
.icon-btn:hover:not([disabled]) { background: var(--accent-muted); color: var(--accent); border-color: var(--accent); }
.icon-btn--danger:hover:not([disabled]) { background: var(--bad-muted); color: var(--bad); border-color: var(--bad); }
@media (pointer: coarse) { .icon-btn { width: 2.5rem; height: 2.5rem; } }