/* ─────────────────────────────────────────
   SOLSTICE TYPOGRAPHY — mkdev.fr
   ───────────────────────────────────────── */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--fb);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* Titres */
h1, h2, h3, h4 {
  font-family: var(--fd);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
h4 { font-size: 1rem; }

p { line-height: 1.75; }

/* Classes utilitaires */
.eyebrow {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--p);
  margin-bottom: .75rem;
}
.lead {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--muted);
}
.mono { font-family: var(--fm); }

/* Tags */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 500;
  padding: .25rem .75rem;
  border-radius: 99px;
}
.tag-o { background: var(--p-light); color: var(--p-dark); }
.tag-v { background: var(--s-light); color: var(--s); }
a.tag  { text-decoration: none; cursor: pointer; }
a.tag:hover { opacity: .8; }
.tag-g { background: var(--tag-g-bg, #DCFCE7); color: var(--tag-g-text, #15803D); }
.tag-mono { font-family: var(--fm); }

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--fb);
  font-size: .875rem;
  font-weight: 500;
  padding: .7rem 1.4rem;
  border-radius: 8px;
  border: none;
  text-decoration: none;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
  cursor: pointer;
}
.btn-primary  { background: var(--p);  color: #fff; }
.btn-primary:hover  { background: var(--p-dark); }
.btn-outline  { background: transparent; color: var(--s); border: 1.5px solid var(--s); }
.btn-outline:hover  { background: var(--s); color: #fff; }
.btn-ghost    { background: transparent; color: var(--p); padding: .5rem 0; }
.btn-nav      { background: var(--p); color: #fff; padding: .4rem 1rem; border-radius: 7px; font-size: .8rem; font-weight: 500; border: none; }

/* Container */
.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}
section { padding: 5rem 0; }

@media (max-width: 640px) {
  section { padding: 3.5rem 0; }
}