@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');

/* ── Variables ─────────────────────────────────────── */
:root {
  --color-primary:   #e02b20;
  --color-secondary: #232351;
  --color-accent:    #04d89c;
  --color-warning:   #f1be52;
  --color-bg:        #f5f6fa;
  --color-surface:   #ffffff;
  --color-text:      #1a1a2e;
  --color-muted:     #6b7280;
  --font:            'Nunito', sans-serif;
  --radius:          10px;
  --radius-sm:       6px;
  --shadow:          0 2px 12px rgba(0,0,0,0.07);
  --shadow-md:       0 4px 24px rgba(0,0,0,0.11);
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--color-text); background: var(--color-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font); }
input, textarea, select { font-family: var(--font); }

/* ── Layout ────────────────────────────────────────── */
.container { max-width: 960px; margin: 0 auto; padding: 0 28px; }
.container--wide { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* ── Tags / Badges ─────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.tag--rouge { background: var(--color-primary);   color: #fff; }
.tag--vert  { background: var(--color-accent);    color: #1a1a2e; }
.tag--jaune { background: var(--color-warning);   color: #1a1a2e; }
.tag--bleu  { background: var(--color-secondary); color: #fff; }
.tag--light { background: #fff; color: #1a1a2e; }

/* ── Buttons ───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.87rem;
  font-weight: 700;
  border: 2px solid transparent;
  transition: opacity .15s, transform .1s;
}
.btn:hover { opacity: .88; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary   { background: var(--color-primary);   color: #fff; border-color: var(--color-primary); }
.btn--secondary { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
.btn--accent    { background: var(--color-accent);    color: #1a1a2e; border-color: var(--color-accent); }
.btn--outline   { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn--outline:hover { background: rgba(255,255,255,0.12); opacity: 1; }
.btn--ghost     { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--danger    { background: transparent; color: #e02b20; border-color: #e02b20; }
.btn--sm        { padding: 5px 12px; font-size: 0.8rem; }
.btn--full      { width: 100%; justify-content: center; }

/* ── Flex utilities ────────────────────────────────── */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }