/* ==========================================================================
   Lexique : un glossaire alphabetique, comme une page de dictionnaire
   Charge apres style.css et hub.css. Classes prefixees lx-.
   ========================================================================== */

/* Alphabet collant : les lettres sans mot restent visibles mais grisees */
.lx-alpha {
  position: sticky;
  top: var(--header-h, 4.1rem);
  z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.lx-alpha ol {
  list-style: none;
  margin: 0;
  padding: .7rem 0;
  display: flex;
  gap: .15rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.lx-alpha ol::-webkit-scrollbar { display: none; }
.lx-alpha a, .lx-alpha span {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}
.lx-alpha a { color: var(--text); transition: background-color .2s ease, color .2s ease; }
.lx-alpha a:hover, .lx-alpha a:focus-visible { background: var(--brand); color: #fff; text-decoration: none; }
.lx-alpha span { color: var(--border-strong); font-weight: 400; cursor: default; }

/* Corps : une grande initiale par lettre, les mots en regard */
.lx-corps { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 8vw, 7rem); background: var(--bg); }
.lx-lettre {
  display: grid;
  grid-template-columns: 1fr;
  gap: .4rem;
  padding: 2.2rem 0 1.6rem;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h, 4.1rem) + 4rem);
}
.lx-lettre:first-child { border-top: 0; padding-top: 0; }
.lx-initiale {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 9vw, 5.5rem);
  font-weight: 500;
  font-style: italic;
  line-height: .9;
  color: var(--brand);
}
.lx-mots { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lx-mot a { display: block; padding: 1rem 0; color: var(--text); }
.lx-mot + .lx-mot a { border-top: 1px dashed var(--border); }
.lx-mot a:hover { text-decoration: none; }
.lx-tete { display: block; margin-bottom: .35rem; }
.lx-tete dfn { font-style: normal; font-family: var(--font-display); font-size: 1.65rem; font-weight: 600; letter-spacing: -.01em; transition: color .25s ease; }
.lx-genre { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--brand); white-space: nowrap; }
.lx-ety { font-family: var(--font-display); font-style: italic; font-size: 1.02rem; color: var(--text-muted); }
.lx-ety i { font-style: normal; }
.lx-def { display: block; max-width: 44rem; font-size: 1.02rem; line-height: 1.65; color: #3d3842; }
.lx-lien {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .6rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--brand);
}
.lx-lien::after { content: ""; width: 1rem; height: 1px; background: currentColor; transition: width .25s ease; }
.lx-mot a:hover dfn { color: var(--brand); }
.lx-mot a:hover .lx-lien::after { width: 1.6rem; }

@media (min-width: 760px) {
  .lx-lettre { grid-template-columns: 7rem minmax(0, 1fr); gap: 2rem; align-items: start; }
  .lx-alpha ol { justify-content: space-between; }
}
@media (min-width: 960px) {
  .lx-mots { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .lx-mot + .lx-mot a { border-top: 0; }
  .lx-mot a { padding: .4rem 0 1.4rem; }
}

/* Alternance tres legere : une lettre sur blanc, la suivante sur beige tres clair,
   en bande pleine largeur */
.lx-corps { padding-top: 0; padding-bottom: 0; background: var(--bg-pure); overflow-x: clip; }
.lx-lettre,
.lx-lettre:first-child {
  padding: clamp(2.4rem, 5vw, 3.4rem) 0;
  border-top: 0;
  background: var(--bg-pure);
  box-shadow: 0 0 0 100vmax var(--bg-pure);
  clip-path: inset(0 -100vmax);
}
.lx-lettre:nth-child(even) {
  background: #fcfaf8;
  box-shadow: 0 0 0 100vmax #fcfaf8;
}
.lx-mot + .lx-mot a { border-top-color: #ece6df; }

/* "Lire la fiche" : italique Bodoni souligne d'une fine vague, plus de tire */
.lx-lien {
  display: inline-block;
  margin-top: .55rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--brand);
  padding-bottom: .3rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='5' viewBox='0 0 12 5'><path d='M0 2.5 C3 0, 3 0, 6 2.5 S9 5, 12 2.5' fill='none' stroke='%23a81e46' stroke-width='1.1'/></svg>") repeat-x 0 100% / 12px 5px;
  transition: background-position .6s ease;
}
.lx-lien::after { content: none; }
.lx-mot a:hover .lx-lien { background-position: 24px 100%; }
@media (prefers-reduced-motion: reduce) { .lx-lien { transition: none; } }

/* ==========================================================================
   Fiche du lexique : ouverture en une colonne, entree de dictionnaire,
   article en lecture continue, termes lies en etiquettes
   ========================================================================== */
.lxf-ouverture { max-width: 46rem; }
.lxf-ouverture h1 { max-width: 20ch; }
.lxf .av-ouverture { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.lxf-corps { grid-template-columns: minmax(0, 1fr) !important; }
.lxf .av-article { max-width: 44rem; }

/* L'entree de dictionnaire, en tete d'article */
.lxf-entree { padding: 0 0 clamp(2rem, 4vw, 2.75rem); margin: 0 0 clamp(2rem, 4vw, 2.75rem); border-bottom: 1px solid var(--border); }
.lxf-entree-tete { margin: 0 0 .7rem; }
.lxf-entree-tete dfn { font-style: normal; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 600; letter-spacing: -.01em; }
.lxf-genre { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--brand); white-space: nowrap; }
.lxf-ety { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--text-muted); }
.lxf-ety i, .lxf-ety em { font-style: normal; }
.lxf-entree-def { margin: 0; font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.55; color: var(--text); }
.lxf-entree-def em { font-style: italic; }

/* Termes lies : etiquettes en rangee */
.lxf-lies { padding: clamp(2.5rem, 5vw, 3.5rem) 0; background: #fcfaf8; border-top: 1px solid var(--border); }
.lxf-lies-t { margin: 0 0 1.2rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.lxf-lies ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.lxf-lies a { display: flex; flex-direction: column; padding: .9rem 1.1rem; border: 1px solid var(--border-strong); border-radius: .9rem; background: var(--bg-pure); color: var(--text); transition: border-color .2s ease; }
.lxf-lies a:hover { border-color: var(--brand); text-decoration: none; }
.lxf-lie-mot { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.lxf-lie-res { font-size: .88rem; color: var(--text-muted); }
@media (min-width: 760px) { .lxf-lies ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .lxf-lies ul { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) {
  .lxf .gd-m { right: max(0rem, calc((100vw - var(--container)) / 2 - 2rem)); }
  .lxf .gd-m:nth-child(even) { right: max(2rem, calc((100vw - var(--container)) / 2 + 6rem)); }
}