.familles-grid {
  margin-top: 2rem;
  border-top: 2px solid var(--vhd-texte);
}
.famille-row {
  display: grid;
  grid-template-columns: 16rem 1fr 1fr;
  gap: 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--vhd-filet);
  align-items: baseline;
}
.famille-nom {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.famille-acteurs, .famille-logique {
  font-size: 0.9375rem;
  line-height: 1.55;
}
.famille-logique { color: var(--vhd-gris); font-style: italic; }
.famille-header {
  display: grid;
  grid-template-columns: 16rem 1fr 1fr;
  gap: 2rem;
  padding: 0.75rem 0;
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--vhd-gris);
}

.art32-section { background: var(--vhd-fond-alt); scroll-margin-top: 5rem; }

.art32-encadre {
  background: var(--vhd-fond);
  border-top: 3px solid var(--vhd-or);
  padding: 2rem;
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  max-width: 64rem;
}
.art32-encadre blockquote {
  font-size: 1.0625rem;
  line-height: 1.65;
  font-style: normal;
}
.art32-encadre blockquote::before {
  content: "« ";
  color: var(--vhd-or);
  font-size: 1.5rem;
  line-height: 0;
  vertical-align: -0.1em;
}
.art32-encadre blockquote::after {
  content: " »";
  color: var(--vhd-or);
  font-size: 1.5rem;
  line-height: 0;
  vertical-align: -0.1em;
}
.art32-source {
  font-size: var(--t-meta);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vhd-or);
  font-weight: 500;
  margin-top: 1rem;
  font-style: normal;
}

.principes {
  counter-reset: pri-counter;
  list-style: none;
  margin-top: 2rem;
}
.principes li {
  counter-increment: pri-counter;
  position: relative;
  padding-left: 3.5rem;
  padding-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  border-bottom: 1px dotted var(--vhd-filet);
  margin-bottom: 1rem;
}
.principes li:last-child { border-bottom: none; }
.principes li::before {
  content: counter(pri-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--vhd-or);
}

.conventions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.convention {
  background: var(--vhd-fond);
  border: 1px solid var(--vhd-filet);
  border-top: 3px solid var(--vhd-bleu);
  padding: 1.75rem 1.5rem;
}
.convention-titre {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 1rem;
  letter-spacing: -0.005em;
}
.convention p { font-size: 0.9375rem; line-height: 1.6; }

.etat-actuel-section { background: var(--vhd-fond); }
.etat-encart {
  margin-top: 2rem;
  padding: 2rem;
  background: var(--vhd-fond-alt);
  border-left: 3px solid var(--vhd-gris);
  max-width: 56rem;
}
.etat-encart p:first-child { font-weight: 500; }

.proposition-liste {
  counter-reset: prop-counter;
  list-style: none;
  margin-top: 2rem;
}
.proposition-liste li {
  counter-increment: prop-counter;
  position: relative;
  padding-left: 3rem;
  padding-bottom: 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.proposition-liste li::before {
  content: counter(prop-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  font-weight: 500;
  color: var(--vhd-or);
}

@media (max-width: 880px) {
  .famille-row, .famille-header { grid-template-columns: 1fr; gap: 0.75rem; }
  .conventions-grid { grid-template-columns: 1fr; }
}