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

:root {
  --paper:#F5F3EC; --ink:#15141B; --gold:#FFC233; --on-gold:#241A02;
  --cream:#F6EFDD; --muted:#575360; --bd:2px solid #15141B;
}

/* Fond + typo de base */
body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: 'Lexend', system-ui, sans-serif !important;
}

/* Le conteneur devient une carte de marque (bordure + ombre franches) */
.container, .container.wrap {
  background: #fff !important;
  border: var(--bd) !important;
  border-radius: 16px !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
  padding: 32px 28px !important;
  margin-top: 40px !important;
}

/* Logo : on masque celui de Listmonk et on injecte le tien (PNG hébergé) */
.header { text-align: center !important; border: 0 !important; }
.header .logo img { display: none !important; }
.header .logo a {
  display: inline-block !important;
  width: 54px !important; height: 54px !important;
  background: url('https://spoilerclub.fr/logo-email.png') center / contain no-repeat !important;
}

/* Titres en Gabarito */
h1, h2, h3 {
  font-family: 'Gabarito', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}

a { color: #9C6710 !important; text-underline-offset: 3px; }

/* Boutons or-popcorn, bordure + ombre franches */
button, input[type="submit"], .button {
  background: var(--gold) !important;
  color: var(--on-gold) !important;
  border: var(--bd) !important;
  border-radius: 999px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  font-family: 'Gabarito', system-ui, sans-serif !important;
  font-weight: 800 !important;
  padding: 12px 22px !important;
}

/* Champs de formulaire */
input[type="text"], input[type="email"], textarea, select {
  border: var(--bd) !important;
  border-radius: 10px !important;
  background: var(--cream) !important;
  color: var(--ink) !important;
  padding: 10px 12px !important;
}

.footer, .footer a { color: var(--muted) !important; }