/**
 * iLucid Dictionnaire — styles de l'archive et des mots détectés.
 *
 * S'appuie sur les design tokens exposés par le thème ilucid-v2
 * (--container-page, --ilucid-gutter, --color-primary, --color-divider,
 * --color-muted, --radius-control, --radius-card). Chaque token porte un repli,
 * pour que le plugin reste présentable sur un projet servi par un autre thème.
 *
 * Préfixes BEM : .ilucid-dictionnaire-archive*, .ilucid-dictionnaire-outils*,
 * .ilucid-dictionnaire-alphabet*, .ilucid-dictionnaire-groupe*,
 * .ilucid-dictionnaire-terme*
 *
 * Chargé par ilucid-dictionnaire.php sur l'archive, et sur les contenus où la
 * détection des termes est active (pour la seule règle .tooltip-word).
 */

/* =====================================================
   Mots détectés dans les contenus
   =====================================================
   La seule règle de cette feuille qui vit hors de l'archive. Elle signale au
   visiteur qu'un mot porte une définition consultable au survol. Sans elle, le
   mot est marqué, l'infobulle fonctionne, mais rien n'invite à s'y arrêter :
   c'est ce qui s'est produit au passage sur un thème qui ne la portait pas. */
.tooltip-word {
  border-bottom: 1px dotted;
  cursor: help;
}

/* =====================================================
   Conteneur de l'archive
   ===================================================== */
.ilucid-dictionnaire-archive__inner {
  max-width: var(--container-page, 82.5rem);
  margin: 0 auto;
  padding: 2.5rem var(--ilucid-gutter, 1.5rem);
}
@media (min-width: 768px) {
  .ilucid-dictionnaire-archive__inner {
    padding: 4rem var(--ilucid-gutter, 2rem);
  }
}

.ilucid-dictionnaire-archive__intro {
  max-width: none;
  margin: 0 0 2rem;
  font-size: 1.0625rem;
  line-height: 1.65;
}
.ilucid-dictionnaire-archive__intro p:last-child {
  margin-bottom: 0;
}

.ilucid-dictionnaire-archive__vide,
.ilucid-dictionnaire-archive__aucun {
  margin: 2rem 0 0;
  padding: 3rem;
  text-align: center;
  color: var(--color-muted, #737373);
  background: #f9fafb;
  border-radius: var(--radius-card, 0.5rem);
}

.ilucid-dictionnaire-archive__resultats {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--color-muted, #737373);
}
/* Vide au repos : la ligne ne doit pas réserver de hauteur tant qu'aucune
   recherche n'est en cours. */
.ilucid-dictionnaire-archive__resultats:empty {
  display: none;
}

/* =====================================================
   Barre d'outils : recherche + alphabet
   =====================================================
   Posée à plat dans la page, sans fond ni filet : seul le champ de saisie porte
   du blanc, parce qu'il est le seul élément à devoir se lire comme un contrôle.
   La barre ne colle plus au défilement non plus, les deux vont ensemble : une
   barre collante sans fond opaque laisserait les termes défiler au travers. */
.ilucid-dictionnaire-outils {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .ilucid-dictionnaire-outils {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
}

.ilucid-dictionnaire-recherche {
  position: relative;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .ilucid-dictionnaire-recherche {
    width: 18rem;
  }
}

/* Le label reste dans le DOM pour les lecteurs d'écran, le placeholder suffit
   à l'œil. */
.ilucid-dictionnaire-recherche__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ilucid-dictionnaire-recherche__champ {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 1rem;
  line-height: 1.4;
  color: inherit;
  background: #ffffff;
  border: 1px solid var(--color-divider, #d1d5db);
  border-radius: var(--radius-control, 0.25rem);
}
.ilucid-dictionnaire-recherche__champ:focus {
  outline: 2px solid var(--color-primary, #1abc9c);
  outline-offset: 1px;
  border-color: var(--color-primary, #1abc9c);
}

.ilucid-dictionnaire-alphabet__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ilucid-dictionnaire-alphabet__lien {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-primary, #1abc9c);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-control, 0.25rem);
}
.ilucid-dictionnaire-alphabet__lien:hover,
.ilucid-dictionnaire-alphabet__lien:focus-visible {
  color: #ffffff;
  background: var(--color-primary, #1abc9c);
  text-decoration: none;
}

/* Lettre sans terme : présente pour que la barre garde la même largeur d'un
   projet à l'autre et ne change pas de forme à chaque ajout, mais ni cliquable
   ni annoncée. */
.ilucid-dictionnaire-alphabet__lien--inerte {
  color: var(--color-muted, #737373);
  opacity: 0.4;
  cursor: default;
}

/* =====================================================
   Groupes de lettres
   =====================================================
   content-visibility fait tout l'intérêt de la page unique. Les 530 termes sont
   bien dans le HTML, donc les moteurs, la recherche instantanée et les ancres
   les voient tous, mais le navigateur ne calcule la mise en page et ne dessine
   que les groupes proches de l'écran. Sans cette règle, une page de cette taille
   dépasse le seuil d'alerte de taille de DOM et rame à l'affichage sur un
   téléphone d'entrée de gamme.

   contain-intrinsic-size donne la hauteur à réserver pour un groupe non rendu.
   Le mot-clé auto demande au navigateur de retenir la dernière hauteur mesurée,
   les groupes déjà visités ne provoquent donc plus de saut de barre de
   défilement. La valeur de départ, 40rem, correspond à un groupe d'une dizaine
   de termes.

   Safari antérieur à 18 ignore la propriété : le comportement y est celui d'une
   page ordinaire, sans régression. */
.ilucid-dictionnaire-groupe {
  content-visibility: auto;
  contain-intrinsic-size: auto 40rem;
  margin-top: 2.5rem;
}

.ilucid-dictionnaire-groupe__lettre {
  margin: 0 0 1.25rem;
  padding-bottom: 0.5rem;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary, #1abc9c);
  border-bottom: 2px solid var(--color-divider, #d1d5db);
}
@media (min-width: 768px) {
  .ilucid-dictionnaire-groupe__lettre {
    font-size: 2rem;
  }
}

/* Groupe entièrement filtré par la recherche : masqué par le script. */
.ilucid-dictionnaire-groupe[hidden] {
  display: none;
}

/* =====================================================
   Termes
   ===================================================== */
.ilucid-dictionnaire-terme {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-divider, #d1d5db);
}
.ilucid-dictionnaire-terme:last-child {
  border-bottom: 0;
}
.ilucid-dictionnaire-terme[hidden] {
  display: none;
}

.ilucid-dictionnaire-terme__titre {
  margin: 0 0 0.375rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .ilucid-dictionnaire-terme__titre {
    font-size: 1.25rem;
  }
}

.ilucid-dictionnaire-terme__definition {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-muted, #737373);
}
.ilucid-dictionnaire-terme__definition p:first-child {
  margin-top: 0;
}
.ilucid-dictionnaire-terme__definition p:last-child {
  margin-bottom: 0;
}

/* Terme visé par une ancre. C'est là qu'arrive un visiteur venu du JSON-LD ou
   d'un lien vers `dictionnaire/#slug` : dans une liste de plusieurs centaines
   d'entrées, atterrir sans repère visuel oblige à relire le haut de l'écran pour
   savoir lequel on cherchait. Le liseré le désigne. */
.ilucid-dictionnaire-terme__titre:target {
  scroll-margin-top: 2rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--color-primary, #1abc9c);
}