: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; }
/* « dans "plate" » : le composé trouvé n'a pas de fiche propre, le lien mène
   à l'article qui le contient. On le dit, discrètement, plutôt que de laisser
   croire à une page absente. */
.hit-in { color: var(--dico-muted); font-size: .82rem; margin-left: .5rem;
          white-space: nowrap; }

.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. */
/* pre-wrap et non pre : les suggestions d'EXEMPLE peuvent faire une ligne
   entière (« in absolute terms », voire une phrase). En `pre` elles ne
   passaient pas à la ligne et poussaient le menu en défilement horizontal.
   pre-wrap garde les espaces significatifs — c'est ce qui motivait `pre` —
   tout en autorisant le retour à la ligne. */
.ac-word { white-space: pre-wrap; overflow-wrap: anywhere; }
.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; }
}