.page--glossaire .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-8) var(--spacing-16);
}

/* Hero */
.page--glossaire .hero {
  padding: var(--spacing-16) 0;
  text-align: center;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--spacing-16);
  background-color: var(--background);
}

.page--glossaire .heroContent {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
}

.page--glossaire .heroBadge {
  letter-spacing: 0.1em;
}

.page--glossaire .title {
  font-family: var(--font-family-heading);
  font-size: clamp(3.5rem, 7vw, 6rem);
  line-height: 0.9;
  margin: 0;
  color: var(--foreground);
  text-transform: uppercase;
}

.page--glossaire .subtitle {
  font-size: 1.25rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  max-width: 600px;
}

/* Search */

/* Sans JavaScript, assets/js/glossaire.js ne câble rien : le champ reste
   affiché mais ne filtre aucun terme. Un champ de recherche qui accepte la
   saisie et ne fait rien est une promesse cassée — pire qu'une absence de
   champ, puisque l'utilisateur croit avoir mal cherché. Les vingt termes
   restent tous visibles, ce qui est l'état de base fonctionnel voulu par le
   commentaire d'en-tête de glossaire.js. Masqué plutôt que désactivé pour ne
   pas laisser un champ grisé sans explication (audit du 6 août 2026, P3). */
.no-js .page--glossaire .searchWrapper {
  display: none;
}

.page--glossaire .searchWrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin-top: var(--spacing-8);
}

.page--glossaire .searchIcon {
  position: absolute;
  left: var(--spacing-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  pointer-events: none;
}

.page--glossaire .searchInput {
  width: 100%;
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-12);
  font-family: var(--font-family-base);
  font-size: 1rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  color: var(--foreground);
  transition: all 0.2s ease;
  outline: none;
}

.page--glossaire .searchInput:focus {
  border-color: var(--primary);
  box-shadow: var(--shadow-focus);
}

/* Sections */
.page--glossaire .section {
  margin-bottom: var(--spacing-16);
}

.page--glossaire .sectionHeader {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-10);
}

.page--glossaire .sectionTitle {
  font-family: var(--font-family-heading);
  font-size: 2.5rem;
  margin: 0;
  color: var(--primary);
  /* Même motif d'en-tête flex que sur /programme, où le raisonnement complet
     est consigné : sans min-width:0, le titre refuse de se réduire sous son
     mot le plus long et pousse .headerSeparator hors du document à 320px
     (WCAG 2.1 « 1.4.10 Reflow », AA). Appliqué ici par prévention — la media
     query 768px repasse déjà la grille en une colonne, mais rien ne protège
     l'en-tête lui-même si un titre plus long est ajouté. */
  min-width: 0;
  overflow-wrap: break-word;
}

.page--glossaire .headerSeparator {
  flex-grow: 1;
}

/* Grid */
.page--glossaire .termsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--spacing-6);
}

/* Cards */
.page--glossaire .termCard {
  background-color: var(--card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.page--glossaire .termCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.page--glossaire .cardHeader {
  padding: var(--spacing-6);
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-4);
}

.page--glossaire .termTitle {
  font-family: var(--font-family-heading);
  font-size: 2rem;
  margin: 0;
  color: var(--foreground);
  line-height: 1;
}

/* opacity portée de 0.5 à 0.75 (audit du 6 août 2026, P1). À 0.5, le kanji
   tombait à 2,08:1 sur --card, sous le seuil WCAG AA de 3:1 applicable au
   grand texte (32px). Ce n'est pas un ornement : dans un glossaire dont
   l'objet est d'enseigner le vocabulaire, l'écriture japonaise du terme EST
   le contenu, et à moitié effacée elle ne remplit pas sa fonction. 0.75 est
   la valeur minimale qui repasse le seuil avec une marge utile — 3,27:1
   mesuré en situ sur le fond réel de .cardHeader — tout en gardant le kanji
   nettement en retrait du titre romaji voisin, qui est à 15,38:1 : la
   hiérarchie visuelle d'origine est préservée. */
.page--glossaire .kanji {
  font-family: serif;
  font-size: 2rem;
  color: var(--muted-foreground);
  opacity: 0.75;
  line-height: 1;
}

.page--glossaire .cardBody {
  padding: var(--spacing-6);
  flex-grow: 1;
}

.page--glossaire .definition {
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.6;
  font-size: 1rem;
}

.page--glossaire .cardFooter {
  padding: var(--spacing-4) var(--spacing-6);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  background-color: color-mix(in srgb, var(--surface) 50%, transparent);
}

.page--glossaire .cardIcon {
  color: var(--secondary);
  opacity: 0.5;
}

.page--glossaire .termCard:hover .cardIcon {
  opacity: 1;
}

/* Empty State */
.page--glossaire .noResults {
  text-align: center;
  padding: var(--spacing-16);
  color: var(--muted-foreground);
  font-size: 1.2rem;
  background-color: var(--surface);
  border: 1px dashed var(--border);
}

/* Responsive */
@media (max-width: 768px) {
  .page--glossaire .title {
    font-size: 3rem;
  }
  
  .page--glossaire .sectionTitle {
    font-size: 2rem;
  }
  
  .page--glossaire .termsGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  /* Sous 480px, un titre comme "CONCEPTS DU BUDO & DOJO" en nowrap dépasse
     la zone utile de 320/375px (jusqu'à 74px de débordement mesuré). Le
     titre peut repasser à la ligne ; .headerSeparator (flex-grow:1) absorbe
     déjà l'espace restant sur une ligne, donc rien d'autre à ajuster. */
  .page--glossaire .sectionTitle {
    white-space: normal;
  }
}