:root {
  /* === Palette Tétradique (saturation douce) === */
  --color-1: #B2BEB5;   /* Sage   — fondamentaux, surfaces */
  --color-2: #5E6E63;   /* Silver foncé — Border, séparateurs (contraste ~3.5:1) */
  --color-3: #BEB2BB;   /* Mauve  — Accents chaleureux, highlights */
  --color-4: #BEBBB2;   /* Khaki — Secondaire, hover states */

  /* Dérivés utiles */
  --surface: var(--color-1);
  --surface-alt: var(--color-4);
  --border: var(--color-2);
  --accent: var(--color-3);
  --text: #2c2c2c;       /* Noir doux pour contraste AA */
  --link: #4a6741;
}

body {
  background-color: var(--surface);
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: var(--text);
}

h1, h2, h3, h4 {
  font-weight: 300;
  color: var(--text)
  border-bottom: 2px solid var(--border);
  padding-bottom: 0.5rem;
}

a, a:visited, a:hover, a:active {
  position: relative;
  transition: 0.5s color ease;
  color: var(--link);
}

a:hover {
  color: var(--color-3); /* Mauve au hover — contraste chaleureux */
}

/* Effet soulignement animé */
a.before:before, a.after:after {
  content: "";
  transition: 0.5s all ease;
  backface-visibility: hidden;
  position: absolute;
}
a.before:before { top: -0.25em; }
a.after:after  { bottom: -0.25em; }
a.before:before, a.after:after {
  height: 0.35rem;
  width: 0;
  background: var(--color-3); /* Mauve */
}
a.first:after { left: 0; }
a.before:hover:before, a.after:hover:after { width: 100%; }

code {
    background-color: var(--color-3);
    padding: 0.1em 0.3em;
    border-radius: 3px;

}

pre code, pre {
    background-color: var(--color-4);
    border-left: 4px solid var(--color-3);

}

blockquote {
  background-color: var(--color-3);
  border-left: 10px solid var(--color-2);
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  border-radius: 5px;
}
blockquote p::before { content: "\201C"; }
blockquote p::after  { content: "\201D"; }

/* === Blog === */
#posts-list ul {
  list-style: none;
  padding-left: 8ch;
}

#posts-list li {
  margin-bottom: 0.3em;
}