/*
 * glossaire.css — PsyRisso Desktop
 * Styles spécifiques à la page Glossaire (refonte, sans Hero).
 * Repris tel quel du mockup validé (glossaire.html).
 * Le système de bandes générique (.bande, .cadre) est dans layout.css.
 */

.gls-h2 {
  font-family: Georgia, serif; font-size: 1.5rem; font-weight: normal;
  color: var(--bleu); margin: 0 0 0.4rem;
}
.gls-sub {
  font-family: Arial, sans-serif; font-size: 0.85rem; color: #5a5a5a;
  margin: 0 0 2rem;
}

.gls-groupe { margin-bottom: 1.5rem; }
.gls-groupe:last-child { margin-bottom: 0; }

.gls-lettre {
  background: var(--creme);
  display: block;
  width: 100%;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A87C34;
  font-weight: bold;
  margin-bottom: 0.6rem;
}

.gls-liste { display: flex; flex-direction: column; }
.gls-item {
  display: flex;
  gap: 1.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--gris-sep);
}
.gls-item:last-child { border-bottom: none; }

.gls-terme {
  width: 130px;
  flex-shrink: 0;
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: var(--bleu);
  font-size: 0.85rem;
}
.gls-def {
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  color: #3a3a3a;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .gls-item { flex-direction: column; gap: 0.25rem; }
  .gls-terme { width: auto; }
}