/* =========================================================
   Menuiseries d'Artois — Brand tokens
   À charger en premier dans toutes tes pages/composants.
   ========================================================= */

/* Lato (texte) + Lora (italique, accents) via Google Fonts.
   Si tu self-hostes les fontes, remplace cet @import par tes
   @font-face (fichiers TTF/WOFF2). */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Lora:ital@1&display=swap');

:root {
  /* ---- Couleurs ---- */
  --ma-green:      #2FBF7A; /* vert de marque — CTA, accents, pilule */
  --ma-green-dark: #249F64; /* hover / état actif */
  --ma-green-soft: #E8F7EF; /* fond clair, surbrillance douce */

  --ma-ink:        #0F1A17; /* noir de marque — texte principal */
  --ma-ink-2:      #2d3a36; /* texte secondaire / paragraphes */
  --ma-muted:      #6b7a75; /* labels, métadonnées */
  --ma-line:       #e8ede8; /* filets et séparateurs */
  --ma-grey:       #f3f5f3; /* fonds neutres */
  --ma-white:      #ffffff;

  /* ---- Typographie ---- */
  --ma-font-sans:  'Lato', 'Helvetica Neue', Arial, sans-serif;
  --ma-font-serif: 'Lora', Georgia, 'Times New Roman', serif;

  --ma-weight-reg:  400;
  --ma-weight-bold: 700;
  --ma-weight-hvy:  900;

  /* ---- Échelle ---- */
  --ma-radius-sm:  4px;
  --ma-radius-md:  8px;
  --ma-radius-pill: 999px;

  --ma-space-1: 4px;
  --ma-space-2: 8px;
  --ma-space-3: 12px;
  --ma-space-4: 16px;
  --ma-space-6: 24px;
  --ma-space-8: 32px;
}

/* ---- Classes utilitaires prêtes à l'emploi ---- */

.ma-wordmark {
  font-family: var(--ma-font-sans);
  font-weight: var(--ma-weight-bold);
  letter-spacing: -0.04em;
  color: var(--ma-ink);
  line-height: 1;
}
.ma-wordmark .ma-accent { color: var(--ma-green); }

.ma-baseline {
  font-family: var(--ma-font-serif);
  font-style: italic;
  color: var(--ma-ink-2);
}

.ma-signature {
  font-family: var(--ma-font-sans);
  font-weight: var(--ma-weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ma-ink);
}
.ma-signature .ma-accent { color: var(--ma-green); }

/* Pilule — badge ou bouton identitaire */
.ma-pill {
  display: inline-block;
  padding: 10px 22px;
  border-radius: var(--ma-radius-pill);
  background: var(--ma-green);
  color: var(--ma-white);
  font-family: var(--ma-font-sans);
  font-weight: var(--ma-weight-bold);
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background 150ms ease;
}
.ma-pill:hover { background: var(--ma-green-dark); }

.ma-pill--outline {
  background: transparent;
  color: var(--ma-green);
  box-shadow: inset 0 0 0 2px var(--ma-green);
}
.ma-pill--outline:hover { background: var(--ma-green); color: var(--ma-white); }

/* Barre verte signature (au-dessus du wordmark) */
.ma-bar {
  display: inline-block;
  height: 12px;
  width: 48px;
  background: var(--ma-green);
}