/* dict-fr.css — dictionnaire de la langue française.
   Feuille complète et autonome. Se dépose telle quelle dans dict-fr/css/.

   Elle reprend le tronc du dictionnaire en-fr — variables, pastille de
   recherche, autocomplétion, .entry, .sense, .examples, .hits — puis le
   complète pour l'unilingue : étymologie, relations, sommaire des sens,
   provenance.

   Une version antérieure assemblait ce fichier à partir de dict-en-fr.css et
   d'un delta, pour éviter de recopier le tronc. La copie est en effet un
   risque : si la feuille du bilingue évolue, celle-ci ne suit pas. Mais
   l'assemblage en était un plus grand, parce qu'il ajoutait une commande à
   lancer que rien ne rappelait — et qu'on oubliait. Le jour où le bilingue
   changera vraiment, une comparaison des deux fichiers suffira.

   Deux corrections d'affectation par rapport au bilingue, le reste est ajout :
   - .definition était gris italique, la traduction portant le sens en
     bilingue. Ici la définition EST le contenu : encre pleine, romain.
   - .direction portait « EN → FR ». Réemployée pour la graphie regroupée,
     elle mettait le mot en capitales et effaçait sa casse — d'où .variantes.
*/

:root {
  --dico-ink: #1a1a1a; --dico-muted: #6b6b6b; --dico-line: #e2e2e2;
  --dico-accent: #0038A8; --dico-bg: #fdfdfc; --dico-soft: #f5f5f3;
}
/* box-sizing scopé au dictionnaire pour ne pas déborder sur le site */
.dico-top *, main .entry *, main .others *, #ac-menu * { box-sizing: border-box; }
/* body géré par le layout du site */
/* En-tête : titre + barre loupe centrée (mécanique reprise du conjugueur). */
.dico-top { text-align: center; padding: 2rem 1rem 1rem; }
#formid { max-width: 46rem; margin: 0 auto; }

/* .englobe : pastille de 60px (loupe) qui se déploie en largeur au focus, puis
   grandit en hauteur quand des suggestions arrivent (.has-results). Menu en
   position statique -> il POUSSE la hauteur au lieu de flotter. */
.englobe {
  position: relative;
  z-index: 10;
  max-height: 60px;
  min-height: 60px;
  width: 60px;
  transition: width .7s ease, max-height .7s ease, border-radius .7s ease;
  border: 3px solid var(--dico-accent);
  background: #fff;
  box-sizing: border-box;
  overflow: visible;   /* laisse dépasser le manche de la loupe (.search::after) */
  border-radius: 999px;
  margin: auto;
  display: inline-block;
  text-align: left;
}
.englobe.ouverte { width: 100%; border-radius: 22px; }
.englobe.ouverte.has-results { max-height: 560px; }

.barre {
  height: 54px;
  width: 100%;
  padding: 0 1rem;
  font: 1.15rem/1 Georgia, serif;
  border: none;
  background: transparent;
  color: var(--dico-ink);
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Focus : c'est la pastille .englobe qui porte l'indication visuelle (sa
   bordure bleue). On retire donc tout anneau/halo de focus propre à l'input
   (outline ET box-shadow), y compris ceux qu'un CSS global du site (polish.css)
   pourrait injecter. Spécificité renforcée (.englobe .barre) + !important pour
   l'emporter sans dépendre de l'ordre de chargement des feuilles. */
.englobe .barre:focus,
.englobe .barre:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* Repliée en loupe : on masque texte et placeholder pour ne pas déborder. */
.englobe:not(.ouverte) .barre { color: transparent; }
.englobe:not(.ouverte) .barre::placeholder { color: transparent; }
.barre, .barre::placeholder { transition: color .35s ease; }

/* Loupe (bouton submit) : manche en CSS pur, pas d'icône externe. */
.search {
  position: absolute;
  bottom: -9px; right: -9px;
  width: 18px; height: 18px;
  border: 0; background: none; cursor: pointer; padding: 0;
}
.search::after {
  content: '';
  position: absolute;
  width: 24px; height: 3px;
  background: var(--dico-accent);
  transform: rotate(45deg);
  transform-origin: left center;
  top: 3px; left: 2px;
  border-radius: 1px;
}
.englobe.ouverte .search { display: none; }   /* déployée : plus besoin de la loupe */

main { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1rem 5rem; }

.entry { margin-bottom: 2.5rem; }
.entry--featured { padding-bottom: 1.5rem; border-bottom: 2px solid var(--dico-line); }
.entry-head { display: flex; align-items: baseline; gap: .75rem;
              flex-wrap: wrap; }
.headword { margin: 0; font-size: 1.9rem; color: var(--dico-accent); }
.direction { font-size: .78rem; color: var(--dico-muted);
             text-transform: uppercase; letter-spacing: .06em; }
.ipa { color: var(--dico-muted); font-family: "Charis SIL", "Doulos SIL", serif;
       margin: .15rem 0 .9rem; }

.sense { margin: 0 0 1.1rem; }
.sense-head { display: flex; align-items: baseline; gap: .45rem;
              margin-bottom: .25rem; }
.sense-num { display: inline-grid; place-items: center;
             width: 1.35rem; height: 1.35rem; border-radius: 50%;
             background: var(--dico-accent); color: #fff;
             font: bold .78rem/1 system-ui, sans-serif; }
.pos { font: italic .84rem Georgia, serif; color: var(--dico-muted);
       border: 0; }
.gender { font: italic .8rem Georgia, serif; color: var(--dico-muted);
          border: 0; }
.reflexive { font-weight: bold; color: var(--dico-accent); }

.tr-list { margin: .1rem 0 .35rem; }
.target { }
.context { color: var(--dico-muted); font-style: italic; font-size: .9rem; }
.government { color: var(--dico-muted); font-size: .9rem; }
.definition { color: var(--dico-muted); font-style: italic; }
.register { font-size: .72rem; text-transform: uppercase;
            letter-spacing: .04em; color: #a05000; }
.register--très, .register--vulgaire { color: #a00; }

.colloc { margin: .25rem 0; }
.source { font-weight: bold; }

.examples { list-style: none; margin: .35rem 0 .5rem;
            padding-left: .9rem; border-left: 2px solid var(--dico-soft); }
.examples li { margin: .18rem 0; font-size: .95rem; }
.examples .target { color: #333; }

.sub { margin: .5rem 0 .5rem .6rem; padding-left: .7rem;
       border-left: 2px solid var(--dico-line); }
.marker { color: var(--dico-accent); }
.sub-head { font-weight: bold; color: var(--dico-accent); }

.more-examples { margin: 0 0 .5rem .9rem; }
.more-examples summary { cursor: pointer; font-size: .84rem;
                         color: var(--dico-muted); }
.more-examples[open] summary { margin-bottom: .2rem; }
.more-examples .examples { border-left-color: var(--dico-line); }
.more-hits summary { cursor: pointer; font-size: .84rem;
                     color: var(--dico-muted); padding: .5rem 0; }

.see-also { font-size: .88rem; color: var(--dico-muted); margin-top: .25rem; }
.see-also a { color: var(--dico-accent); }

.inflections { margin-top: 1rem; font-size: .88rem; color: var(--dico-muted); }
.inflections summary { cursor: pointer; }

.others h3 { font-size: .95rem; text-transform: uppercase;
             letter-spacing: .05em; color: var(--dico-muted);
             font-weight: normal; margin: 2rem 0 .6rem; }
.hits { list-style: none; margin: 0; padding: 0; }
.hits li { display: grid; grid-template-columns: 11rem 6rem 1fr;
           gap: .6rem; align-items: baseline;
           padding: .4rem 0; border-bottom: 1px solid var(--dico-soft); }
.hit-head { font-weight: bold; color: var(--dico-accent); text-decoration: none; }
.hit-kind { font-size: .72rem; text-transform: uppercase;
            letter-spacing: .04em; color: var(--dico-muted); }
.hit-text { color: #444; font-size: .93rem; }

.empty, .hint { color: var(--dico-muted); margin-top: 2rem; }

/* Boutons d'écoute (Web Speech API). Discrets, alignés au texte voisin. */
.speak {
  border: 0; background: transparent; cursor: pointer; padding: 0 .15em;
  font-size: .85em; line-height: 1; vertical-align: baseline;
  opacity: .55; transition: opacity .15s, transform .1s;
}
.speak:hover, .speak:focus { opacity: 1; }
.speak:focus-visible { outline: 2px solid var(--dico-accent); border-radius: 3px; }
.speak.speaking { opacity: 1; animation: speak-pulse .8s ease-in-out infinite; }
@keyframes speak-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.headword + .speak { font-size: .7em; margin-left: .1em; }

.did-you-mean { color: var(--dico-muted); margin-top: .6rem; font-size: .95rem; }
.did-you-mean a { color: var(--dico-accent); text-decoration: none;
                  border-bottom: 1px solid transparent; }
.did-you-mean a:hover, .did-you-mean a:focus { border-bottom-color: currentColor; }

@media (max-width: 34rem) {
  .hits li { grid-template-columns: 1fr; gap: .1rem; }
  .headword { font-size: 1.5rem; }
}

/* ------------------------------------------------------ autocomplétion */
/* Menu en position STATIQUE : il prolonge la zone bleue de .englobe et en
   pousse la hauteur (transition max-height), au lieu de flotter par-dessus. */
.ac-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  text-align: left;
  transition: max-height .4s ease, padding .4s ease, margin .4s ease;
}
.englobe.has-results .ac-menu {
  max-height: 480px;
  overflow-y: auto;
  margin: .25rem 0 0;
  padding: .35rem 0 .5rem;
}
.englobe:not(.ouverte) .ac-menu { display: none; }

.ac-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1rem;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0;
  animation: acFade .25s ease forwards;
}
.ac-item:hover,
.ac-item.ac-active { background: #eef2fb; }
@keyframes acFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ac-item { animation: none; opacity: 1; }
  .englobe, .ac-menu, .barre { transition: none; }
}

/* Badge de langue : EN (anglais) bleu accent, FR (français) rouge. */
.ac-badge {
  flex: none;
  min-width: 1.8rem;
  text-align: center;
  font: 600 .64rem/1.5 system-ui, sans-serif;
  letter-spacing: .04em;
  padding: .1rem .3rem;
  border-radius: 3px;
  text-transform: uppercase;
}
.ac-badge--en { color: #fff; background: #c0392b; }
.ac-badge--fr { color: #fff; background: var(--dico-accent); }

/* Partie tapée (sobre) vs reste (accentué), comme le conjugueur. */
.ac-word { white-space: pre; }
.ac-typed { color: var(--dico-ink); }
.ac-rest  { color: var(--dico-accent); font-weight: 600; }
.ac-item:hover .ac-rest,
.ac-item.ac-active .ac-rest { color: var(--dico-accent); }

@media (max-width: 34rem) {
  .ac-item { font-size: .95rem; }
}


/* ================== ce que le dictionnaire unilingue ajoute ============= */

/* ------------------------------------------------------------ articles */

/* Sur une page de graphie, les articles sont pairs (nom, adjectif, verbe…) :
   pas de hiérarchie visuelle entre le premier et les suivants, contrairement
   au bilingue où .entry--featured signalait le résultat principal. */
main .entry--featured { border-bottom: 0; padding-bottom: 0; }
main .entry + .entry {
  border-top: 1px solid var(--dico-line);
  padding-top: 1.5rem;
}
main .entry { scroll-margin-top: 1rem; }
main .headword { line-height: 1.15; }

/* ------------------------------------------------------------ étymologie */

.etym {
  margin: .1rem 0 1rem;
  color: var(--dico-muted);
  font-size: .93rem;
}
.etiquette {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dico-muted);
  margin-right: .15rem;
}

/* Etymologie repliee : les 47 160 articles qui s'ouvrent sur un arbre de
   gabarit aplati. Calque sur .relations-longues — meme triangle, meme
   couleur, meme comportement au survol — pour qu'un lecteur reconnaisse le
   meme geste. Le marqueur natif est retire des deux cotes.

   .etiquette porte sa propre couleur : sans le inherit ci-dessous, le mot
   « Etymologie » resterait gris a cote d'un triangle colore, et le resume
   n'aurait pas l'air cliquable. */
.etym-longue {
  margin: .1rem 0 1rem;
}
.etym-longue > summary {
  cursor: pointer;
  color: var(--dico-accent);
  font-size: .93rem;
  list-style: none;
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
}
.etym-longue > summary .etiquette { color: inherit; }
.etym-longue > summary::-webkit-details-marker { display: none; }
.etym-longue > summary::before { content: "\25B8"; font-size: .8em; }
.etym-longue[open] > summary::before { content: "\25BE"; }
.etym-longue > summary:hover { text-decoration: underline; }
.etym-longue[open] > summary { margin-bottom: .3rem; }
/* Le <p class="etym"> est dans le <details> : la marge exterieure est
   portee par le <details>, pas deux fois. */
.etym-longue > .etym { margin: 0; }

/* ------------------------------------------- sommaire des sens (> 6 sens) */

/* Un lien par sens, pas par article : sur une page de gentilé, la difficulté
   est de trouver sa commune parmi cent, pas de choisir entre deux catégories.
   Replié au-delà de quinze sens pour ne pas noyer le premier écran. */
.toc {
  margin: 0 0 1.2rem;
  border-left: 2px solid var(--dico-soft);
  padding-left: .9rem;
}
.toc > summary {
  cursor: pointer;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dico-muted);
  padding: .2rem 0;
}
.toc-list {
  list-style: none;
  margin: .35rem 0 .5rem;
  padding: 0;
  columns: 2 15rem;
  column-gap: 1.5rem;
}
.toc-list li { break-inside: avoid; padding: .08rem 0; }
.toc-list a {
  display: flex;
  gap: .45rem;
  align-items: baseline;
  text-decoration: none;
  color: var(--dico-ink);
  font-size: .88rem;
}
.toc-num {
  flex: none;
  min-width: 1.6rem;
  text-align: right;
  color: var(--dico-muted);
  font: .74rem/1.5 system-ui, sans-serif;
}
.toc-glose { color: var(--dico-muted); }

/* ------------------------------------------------------------------ sens */

/* La définition tient sur la même ligne que son numéro : à 106 sens, une
   ligne perdue par sens fait une page deux fois plus longue. */
.sense .definition {
  flex: 1;
  margin: 0;
  color: var(--dico-ink);
  font-style: normal;
  font-size: 1rem;
}
.sense-head { align-items: flex-start; }
.sense .sense-num { margin-top: .1rem; }
.sense .context { margin-right: .1rem; }
.sense .register { white-space: nowrap; }

/* Alignement du contenu secondaire sur la définition, pas sur le numéro :
   largeur de la pastille (1.35rem) + gouttière du .sense-head (.45rem). */
.sense > .examples,
.sense > .more-examples,
.sense > .government { margin-left: 1.8rem; }
.sense > .government { margin-top: .2rem; margin-bottom: .2rem; }
.sense { scroll-margin-top: 1rem; }
.sense:target .definition {
  background: #fff6d8;
  box-shadow: 0 0 0 .25rem #fff6d8;
  border-radius: 2px;
}

/* Article long : le disque plein devient un cercle. Empilé cent fois, le
   disque bleu du bilingue — où un article dépasse rarement dix sens —
   se lit comme une colonne de pastilles et non comme une numérotation. */
.entry--long .sense-num {
  background: transparent;
  color: var(--dico-accent);
  border: 1px solid var(--dico-line);
  font-weight: normal;
  width: 1.6rem;
}
.entry--long .sense { margin-bottom: .7rem; }

/* Sous-sens : la hiérarchie du Wiktionnaire, 0,47 % des sens. */
.sub-head { margin: 0 0 .35rem; font-size: .92rem; }

/* ------------------------------------------------------------- relations */

.relations {
  margin: 1rem 0 0;
  font-size: .92rem;
}
.relations > div { margin: .25rem 0; }
.relations dt {
  display: inline;
  font-size: .68rem;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dico-muted);
}
.relations dd { display: inline; margin: 0 0 0 .45rem; }
.relations a { color: var(--dico-accent); text-decoration: none; }
.relations a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ provenance */

/* Attribution CC BY-SA. Discrète, mais sur chaque page et non repliable :
   c'est la condition de la licence, pas une mention légale d'habitude. */
/* Discrète, mais présente sur chaque page : c'est la condition de la
   licence, pas une mention d'habitude.

   Les déclarations qui suivent annulent explicitement ce que la feuille du
   site applique à ses pieds de page — fond sombre, texte centré, texte clair.
   Une première version employait la balise <footer>, qui héritait de tout
   cela et produisait un bandeau noir au milieu de la page. */
main .provenance {
  margin: 2rem 0 0;
  padding: .7rem 0 0;
  border-top: 1px solid var(--dico-line);
  background: none;
  text-align: left;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--dico-muted);
}
main .provenance a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--dico-line);
}

/* ------------------------------------------------------- autocomplétion */

/* Le badge ne distingue plus deux langues mais deux natures d'entrée :
   le mot lui-même, ou une forme qui y conduit. */
.ac-badge--mot { color: #fff; background: var(--dico-accent); }
.ac-badge--forme { color: var(--dico-muted); background: var(--dico-soft); }
.ac-lemme {
  margin-left: auto;
  padding-left: .6rem;
  font-size: .8rem;
  color: var(--dico-muted);
  white-space: nowrap;
}
.ac-vide { padding: .6rem 1rem; color: var(--dico-muted); font-size: .93rem; }

@media (max-width: 34rem) {
  .toc-list { columns: 1; }
  .sense > .examples,
  .sense > .more-examples,
  .sense > .government { margin-left: 0; }
}

@media print {
  .dico-top, .speak, .toc { display: none; }
  .more-examples[open] summary { display: none; }
  main { max-width: none; }
}

/* ------------------------------------------- saut entre articles (« de ») */

.pos-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .4rem;
  margin: 0 0 1.4rem;
  padding: 0;
}
.pos-nav a {
  display: block;
  padding: .2rem .55rem;
  border: 1px solid var(--dico-line);
  border-radius: 3px;
  font-size: .82rem;
  text-decoration: none;
  color: var(--dico-muted);
}
.pos-nav a:hover { border-color: var(--dico-accent); color: var(--dico-accent); }

/* ------------------------------------------------------------ tous liens */

/* Tout lien du dictionnaire se souligne au survol. Une règle unique plutôt
   qu'une par composant : les liens sont dispersés — sommaire, relations,
   provenance, bandeau de saut, pages de choix — et une règle par endroit
   finit toujours par en oublier un.
   :focus-visible fait de même au clavier, sans quoi la navigation à la
   tabulation perdrait l'indication que la souris obtient. */
main a:hover,
main a:focus-visible { text-decoration: underline; }

/* Sauf les liens d'ancre — bandeau de saut, sommaire des sens. Ils ne quittent
   pas la page et portent déjà leur indication : bordure et couleur pour le
   bandeau, couleur pour le sommaire. Le soulignement s'y ajoutait sans rien
   dire de plus, et alourdissait des éléments encadrés. */
main a[href^="#"]:hover,
main a[href^="#"]:focus-visible { text-decoration: none; }
.toc-list a:hover,
.toc-list a:focus-visible { color: var(--dico-accent); }
.toc-list a:hover .toc-glose,
.toc-list a:focus-visible .toc-glose { color: inherit; }

/* ------------------------------------------------ correctifs d'affichage */

/* La référence d'un exemple doit tomber à la ligne : collée, elle se lit
   comme la suite de la citation. */
.examples cite {
  display: block;
  font-style: normal;
  font-size: .8rem;
  color: var(--dico-muted);
  margin-top: .1rem;
}

/* .direction est en capitales — juste pour « EN → FR », faux pour une
   graphie : « AUSSI ÉCRIT SAINT-MARTINOIS » efface la casse du mot, qui est
   précisément ce que la mention sert à montrer. */
.variantes {
  font-size: .78rem;
  color: var(--dico-muted);
}
.variantes b, .entry-head .variantes { font-weight: 400; }

/* ===== Dictionnaire d'anglais =============================================
 *
 * Deux regles ajoutees pour le dictionnaire d'anglais. Tout en ASCII :
 * les fleches passent par leur code CSS, ce qui evite qu'un copier-coller
 * ou un editeur mal regle ne les abime.
 *
 * 1. Etiquette d'accent devant chaque transcription. Le francais n'a qu'une
 *    norme de prononciation et n'etiquetait rien ; l'anglais en affiche
 *    deux, « UK /dog/ . US /dog/ », et sans style le « UK » se confond avec
 *    l'API qui le suit.
 *
 * 2. Repli des listes de relations trop longues. Mesure sur le corpus
 *    anglais : `derive` a une moyenne de 7 cibles par article et un maximum
 *    de 1 223 — « water » en aligne 900. Au seuil de 24, 3 % des blocs
 *    `derive` se replient, 0,3 % des `apparente`, et le francais n'y arrive
 *    quasiment jamais.
 * ======================================================================== */

.ipa .accent {
  font: bold .68rem/1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dico-muted);
  background: var(--dico-soft);
  border-radius: .2em;
  padding: .1em .35em;
  margin-right: .15em;
  vertical-align: .05em;
}

.relations-longues > summary {
  cursor: pointer;
  color: var(--dico-accent);
  font-size: .93rem;
  list-style: none;
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
}
.relations-longues > summary::-webkit-details-marker { display: none; }
.relations-longues > summary::before { content: "\25B8"; font-size: .8em; }
.relations-longues[open] > summary::before { content: "\25BE"; }
.relations-longues > summary:hover { text-decoration: underline; }
.relations-longues[open] > summary { margin-bottom: .3rem; }

/* Le lemme ne porte pas de badge, et n'en reserve pas la place.
   Une premiere version laissait la gouttiere de 1,8 rem vide pour aligner
   les mots en colonne : a l'usage, un decalage sans rien dedans se voit
   davantage qu'un bord irregulier. Les formes etant rares — elles sont
   presque toutes eclipsees par un article homographe —, la liste se cale
   simplement a gauche, et la pastille pousse la ligne quand elle parait. */
.ac-badge--vide { display: none; }

/* ===== Dictionnaire d'espagnol ============================================
 *
 * Une regle : le trait phonologique devant certaines transcriptions.
 * dico-es.php distingue deux especes dans la colonne accent — les REGIONS
 * (Colombie, Venezuela...), qui reprennent .ipa .accent ci-dessus, et les
 * TRAITS PHONOLOGIQUES (seseante, yeista, sheista, zheista et leurs
 * negations), qui recoivent .trait-phono. Sans cette regle le trait sort
 * en texte nu, soude a l'API, et la distinction du PHP n'existe pas a
 * l'ecran.
 *
 * Contre-pied delibere du badge .accent : italique et bas de casse la ou
 * le badge est droit et en capitales, sans fond la ou il en a un.
 * « seseante » est un mot espagnol qui se lit — une epithete, pas un
 * sigle — et il se combine (« seseante, yeista ») : en capitales sur fond
 * gris, la paire ferait un pave plus lourd que la transcription qu'elle
 * qualifie. system-ui le detache de l'API, qui reste en Charis serif.
 * Source de verite : dict-es.delta.css, dont ceci est le versement.
 * ======================================================================== */

.ipa .trait-phono {
  font: italic .82rem/1 system-ui, sans-serif;
  color: var(--dico-muted);
  margin-right: .15em;
}

/* ---------------------------------------------------------------------
   Bloc « Aller plus loin » (dict-commun/lib/croisement.php) : traductions
   du bilingue et lien vers la conjugaison, AVANT les définitions.
   Ajouté le 11/09/2026. Il reprend .target, .gender, .pos, .examples et
   .see-also de la fiche ; seul le cadre est nouveau. */
.croisement { margin: 0 0 2rem; padding: .9rem 1.1rem 1rem;
              background: var(--dico-soft); border-left: 3px solid var(--dico-accent);
              border-radius: 0 6px 6px 0; }
.croisement-titre { margin: 0 0 .45rem; font-size: .8rem; text-transform: uppercase;
                    letter-spacing: .06em; color: var(--dico-muted); }
.croisement-trad { margin: 0 0 .5rem; font-size: 1.08rem; line-height: 1.55; }
.croisement-trad .target { color: var(--dico-ink); }
.croisement-ex { border-left: 2px solid var(--dico-line); padding-left: .7rem; }
.croisement .see-also { margin-top: .4rem; }
.croisement-conj a { font-weight: bold; }

/* ---------------------------------------------------------------------
   Pages de regroupement (hub-dict-fr.php) et leur entrée sur l'accueil.
   Ajouté le 11/09/2026. */
.hub-intro { color: var(--dico-muted); margin: 0 0 1.5rem; line-height: 1.55; }
.hub-liste { margin: 0; padding-left: 3rem; }
.hub-liste li { margin: .45rem 0; line-height: 1.45; }
.hub-liste li::marker { color: var(--dico-muted); font-size: .8rem; }
.hub-mot { font-weight: bold; color: var(--dico-accent); text-decoration: none; }
.hub-mot:hover { text-decoration: underline; }
.hub-liste .pos { margin: 0 .3rem; }
.hub-glose { color: #444; }
.hub-index { list-style: none; margin: 0; padding: 0;
             columns: 2; column-gap: 2rem; }
@media (min-width: 40rem) { .hub-index { columns: 3; } }
.hub-index li { break-inside: avoid; margin: .3rem 0; }
.hub-index a { color: var(--dico-accent); text-decoration: none; }
.hub-index a:hover { text-decoration: underline; }
.hub-n { color: var(--dico-muted); font-size: .8rem; margin-left: .25rem; }
.hub-pages { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
             margin: 2rem 0 1rem; font-size: .92rem; }
.hub-pages-liste { display: flex; flex-wrap: wrap; gap: .35rem; }
.hub-pages-liste a, .hub-pages-liste b { min-width: 1.8rem; text-align: center;
             padding: .1rem .3rem; border-radius: 4px; }
.hub-pages-liste b { background: var(--dico-accent); color: #fff; }
.hub-pages-liste a { color: var(--dico-accent); text-decoration: none; background: var(--dico-soft); }
.hub-accueil { margin-top: 2.5rem; }
.hub-accueil h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em;
                  color: var(--dico-muted); margin: 0 0 .8rem; }
.context a, .register a { color: inherit; text-decoration: underline dotted; }
.context a:hover, .register a:hover { color: var(--dico-accent); }