/*!**************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./assets/pages/dictionnaire/dictionnaire.scss ***!
  \**************************************************************************************************************************************/
@charset "UTF-8";
/* === DICO_SCSS_META_START ===
path: assets/pages/dictionnaire/dictionnaire.scss
=== DICO_SCSS_META_END === */
/* Page d'accueil — le dictionnaire en deux colonnes.
   Reprend la mise en page de la page /dictionnaire d'Habilo (hero, moteur, barre
   alphabétique, liste + panneau) et le rendu de fiche de sa vue « dictionnaire
   général » (sections repliables, chips de mots, étymologie). Le socle de charte
   — variables, en-tête, pied — vit dans src/scss/app.scss. */
/* `.visually-hidden` vivait ici ; elle est passée dans src/scss/app.scss, que
   toutes les pages chargent — voir le commentaire là-bas. */
/* Le dictionnaire déborde du gabarit commun : deux colonnes denses à 1164 px
   serraient la fiche. Seule la page du dictionnaire est élargie — l'en-tête et le
   pied gardent le cadre de charte. 1841 - 2×18 de gouttière = 1805 px utiles. */
.wrap:has(> .dicopage) {
  max-width: 1841px;
}

.dicopage {
  /* Le titre du hero étant masqué, on resserre le haut : plus de grand vide au-dessus
     du bandeau de chiffres et du moteur. */
}
.dicopage .hero {
  padding-top: 24px;
}
.dicopage {
  /* Le moteur, lui, ne suit pas l'élargissement : un champ de saisie de 1805 px de
     large ne se lit pas. Il reste au gabarit de charte, centré au-dessus des colonnes. */
}
.dicopage .dico-search {
  max-width: 1164px;
  margin-left: auto;
  margin-right: auto;
}
.dicopage {
  /* Titre court + ligne de chiffres, à la place de l'ancien hero. Compact, centré. */
}
.dicopage .dico-title {
  margin: 0;
  text-align: center;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream);
}
.dicopage {
  /* Sous le titre : la liste des rubriques du dictionnaire, séparées par des points
     médians, sur une ligne (repliée au besoin sur les petits écrans). */
}
.dicopage .dico-figures {
  max-width: 1164px;
  margin: 8px auto 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  color: var(--mut);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.6;
}
.dicopage {
  /* ── Le chapô des RUBRIQUES ──
     Ce gabarit sert aussi /numerique/, où une phrase situe le lexique sous le
     titre. Le filet de séparation appartient alors au chapô et non à la ligne
     de rubriques qui le précède : laissé en place, il coupait l'en-tête en deux
     et rejetait le chapô sous la barre, comme s'il appartenait au moteur. */
}
.dicopage .dico-figures:has(+ .dico-chapo) {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.dicopage .dico-chapo {
  max-width: 78ch;
  margin: 8px auto 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  color: var(--mut);
  font-size: 15px;
  line-height: 1.65;
}
.dicopage {
  /* ── Moteur : une seule ligne ── champ (souple), bouton, cadran. Les deux dernières
     colonnes sont à largeur FIXE et le champ prend ce qui reste : cinq colonnes égales
     ne tenaient que tant que le cadran n'était gradué que d'un côté. Les 268px sont
     ceux de `.sxp-selector.is-duo` — les changer ici sans les changer là ferait
     déborder les libellés hors de leur cellule. */
}
.dicopage .dico-searchrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px 268px;
  gap: 14px;
  align-items: center;
}
.dicopage {
  /* Colonne du champ : l'input et son aide de mode empilés. Sa seconde ligne (l'aide)
     l'aligne sur le bouton + compteur de la colonne voisine. */
}
.dicopage .dico-field {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.dicopage .dico-field > input {
  width: 100%;
}
.dicopage .dico-hint {
  margin: 0;
  padding-left: 2px;
  color: var(--mut);
  font-size: 13px;
  line-height: 1.3;
  min-height: 17px;
  /* Transition douce au changement de mode (sans clignoter). */
  transition: opacity 0.15s ease;
}
.dicopage {
  /* Sélecteur de mode de recherche — bouton rotatif SXP (porté de /sdk/Panel).
     Il remplace l'ancien interrupteur « Formes principales » : quatre modes au lieu
     d'un oui/non. Les libellés (complets) s'empilent en colonne à droite du bouton.
     Dernière colonne de la grille, centré dans sa cellule.

     Il est désormais gradué sur ses DEUX flancs : les quatre modes du français à
     gauche, les deux autres dictionnaires à droite. Cela reste UN réglage — un seul
     cran allumé. Le conteneur garde son nom : c'est le même cadran, mieux gradué. */
}
.dicopage .dico-mode {
  display: flex;
  justify-self: center;
}
.dicopage {
  /* --- Bouton rotatif SXP : styles portés de synapx.fr /sdk/Panel/panel.css,
     transposés à la palette du dictionnaire (accent orange au lieu du vert SXP).
     Disposition en colonne : bouton à gauche, libellés empilés à droite. Le conteneur
     est assez large pour le bouton + le plus long libellé, et haut pour les quatre. --- */
}
.dicopage .sxp-selector {
  position: relative;
  width: 196px;
  height: 134px;
}
.dicopage {
  /* Anti-FOUC : avant que le JS ne monte le cadran, les libellés ne sont que quatre
     <button> bruts (habillés du style orange global). On masque donc le conteneur
     jusqu'à ce que le JS pose `data-sxp-ready`, puis on le révèle en fondu. La place
     reste réservée (dimensions fixes ci-dessus) : aucun décalage à l'apparition.
     `visibility` (et non `display:none`) : le JS a besoin des offsets pour la
     géométrie, que `display:none` mettrait à zéro. */
}
.dicopage .sxp-selector:not([data-sxp-ready]) {
  visibility: hidden;
}
.dicopage .sxp-selector[data-sxp-ready] {
  animation: sxp-apparition 0.18s ease both;
}
.dicopage {
  /* Libellés ancrés par leur bord GAUCHE (et non centrés) : la colonne s'aligne à
     gauche, quelle que soit la longueur du mot. */
}
.dicopage .sxp-selector.is-column .sxp-selector-opt {
  transform: translateY(-50%);
}
.dicopage {
  /* ── Cadran gradué des DEUX CÔTÉS ── le bouton se recentre dans son cadre et le
     conteneur s'élargit pour porter une colonne de libellés de chaque côté. Sans ce
     recentrage, le flanc gauche sortirait du cadre : le bouton était calé à 12px du
     bord, il n'y avait rien à sa gauche. Deux colonnes, un seul réglage. */
}
.dicopage .sxp-selector.is-duo {
  width: 268px;
}
.dicopage .sxp-selector.is-duo .sxp-selector-knob {
  left: 50%;
  margin-left: -27px;
}
.dicopage {
  /* Colonne de GAUCHE : les libellés s'ancrent par leur bord DROIT, pour que la
     colonne s'aligne face au bouton au lieu de s'en éloigner mot par mot. Le
     sélecteur doit rester dans le sélecteur : cette règle bat celle du bord gauche
     ci-dessus, qui la précède et vaut pour le flanc droit. */
}
.dicopage .sxp-selector.is-column .sxp-selector-opt.is-left {
  transform: translate(-100%, -50%);
}
.dicopage .sxp-selector-knob {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 0;
  border-radius: 50%;
  cursor: grab;
  outline: none;
  background: repeating-conic-gradient(from 0deg, #2a2f3a 0 7deg, #171a21 7deg 14deg);
  border: 1px solid var(--line);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.05);
}
.dicopage .sxp-selector-knob:active {
  cursor: grabbing;
}
.dicopage .sxp-selector-knob:focus-visible {
  box-shadow: 0 0 0 2px var(--acc), 0 3px 8px rgba(0, 0, 0, 0.6);
}
.dicopage .sxp-selector-knob {
  /* Déclic tactile : le bouton se contracte brièvement quand un mode est choisi
     (classe posée par le JS). Rejoué à chaque cran, jamais bloquant. */
}
.dicopage .sxp-selector-knob.is-click {
  animation: sxp-knob-click 90ms ease;
}
.dicopage .sxp-selector-knob::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #232833, #10141a);
  border: 1px solid #2a323d;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}
.dicopage .sxp-selector-ptr {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 3px;
  height: 13px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--acc);
  box-shadow: 0 0 6px var(--acc);
  z-index: 1;
  transform-origin: 50% 24px;
  transition: transform 0.2s cubic-bezier(0.34, 1.5, 0.5, 1);
}
.dicopage .sxp-selector-opt {
  position: absolute;
  transform: translate(-50%, -50%);
  /* Ces libellés sont des <button> : on annule le fond orange et l'espacement que
     la charte donne à tout bouton, pour ne garder que la pastille de l'actif. */
  background: none;
  border: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--mut);
  cursor: pointer;
  padding: 2px 7px;
  border-radius: 5px;
  user-select: none;
  line-height: 1.3;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.dicopage .sxp-selector-opt:hover {
  color: var(--cream);
}
.dicopage .sxp-selector-opt.is-on {
  color: #1a1205;
  background: var(--acc);
  font-weight: 700;
  box-shadow: 0 0 8px rgba(255, 102, 0, 0.45);
}
.dicopage {
  /* ── Barre alphabétique, dans le cadre du moteur ── */
}
.dicopage .dico-alpha {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.dicopage .dico-alpha__b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--mut);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.dicopage .dico-alpha__b:hover {
  color: var(--txt);
  border-color: var(--mut);
  text-decoration: none;
}
.dicopage .dico-alpha__b.is-active {
  background: var(--acc);
  border-color: var(--acc);
  color: #1a1205;
}
.dicopage .dico-alpha {
  /* La barre grecque est bâtie en JS avec des <button> — la française est faite
     de <a> vers /lettre/{x}/, qui n'ont pas d'équivalent crawlable en grec
     depuis que /grec/ redirige. Il faut donc neutraliser le style natif du
     bouton pour que les deux barres se ressemblent trait pour trait. */
  /* La classe est écrite EN CLAIR, pas en `&__b` : `.dico-alpha` vit sous
     `.dicopage`, si bien que `&__b` réinjecte toute la chaîne parente et
     compile `.dicopage .dico-alpha--grec .dicopage .dico-alpha__b` — un
     sélecteur que rien ne peut satisfaire. */
}
.dicopage .dico-alpha--grec .dico-alpha__b {
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  /* La couleur est REPOSÉE ici : le style global des boutons du formulaire
     (bouton « Rechercher ») les peint en accent, et sans cette ligne toute
     la barre grecque s'affichait en orange — vingt-quatre lettres qui
     semblaient toutes sélectionnées. */
  color: var(--mut);
  font-size: 15px;
}
.dicopage .dico-alpha--grec .dico-alpha__b:hover {
  color: var(--txt);
  border-color: var(--mut);
}
.dicopage .dico-alpha--grec .dico-alpha__b {
  /* Le fond est REPOSÉ lui aussi : `background: transparent` ci-dessus a la
     même spécificité que `.dico-alpha__b.is-active` et, venant après, il
     l'emportait — la lettre active se retrouvait en texte sombre sur fond
     sombre, donc invisible. */
}
.dicopage .dico-alpha--grec .dico-alpha__b.is-active {
  background: var(--acc);
  border-color: var(--acc);
  color: #1a1205;
}
.dicopage {
  /* Clavier grec, monté au-dessus de la barre alphabétique sur le seul cran
     « grec » : sur un AZERTY, le champ de recherche était sinon inatteignable
     pour un corpus de 17 824 vedettes. Vingt-quatre lettres de base — la
     recherche replie les diacritiques, le polytonique n'apporterait rien.
     Il partage la grille de `.dico-alpha` pour que les deux rangées se lisent
     comme un seul appareil d'entrée, et non comme deux barres empilées. */
}
.dicopage .dico-clavier {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  /* La barre alphabétique qui suit ne redouble pas le filet : deux traits
     séparés par une seule rangée de touches hacheraient le cadre. */
}
.dicopage .dico-clavier + .dico-alpha {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}
.dicopage .dico-clavier__t {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--txt);
  /* Un cran au-dessus de l'alphabet latin : les lettres grecques sont moins
     familières, et plusieurs ne se distinguent qu'à un détail — ν contre υ,
     ζ contre ξ. */
  font-size: 16px;
  line-height: 1.1;
  cursor: pointer;
}
.dicopage .dico-clavier__t:hover {
  border-color: var(--acc);
  color: var(--acc);
}
.dicopage .dico-clavier__t:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
.dicopage .dico-clavier__t:active {
  transform: translateY(1px);
}
.dicopage .dico-clavier__t.is-retour {
  color: var(--mut);
  font-size: 14px;
}
.dicopage {
  /* Quatrième colonne : le bouton, et le compteur de résultats juste dessous. */
}
.dicopage .dico-submit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.dicopage .dico-submit button {
  width: 100%;
}
.dicopage {
  /* Compteur de résultats, sous le bouton Rechercher. */
}
.dicopage .dico-meta {
  color: var(--mut);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  min-height: 18px;
}

/* Déclic du bouton rotatif : une contraction vive puis retour. Neutralisé pour qui
   demande moins d'animations. */
@keyframes sxp-knob-click {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
/* Apparition du cadran une fois monté par le JS (anti-FOUC). */
@keyframes sxp-apparition {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sxp-selector[data-sxp-ready] {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sxp-selector-knob.is-click {
    animation: none;
  }
}
.dico-panne {
  margin: 40px auto;
  max-width: 620px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: 10px;
  background: var(--card);
  color: var(--mut);
  text-align: center;
}

/* ── Deux colonnes : liste (gauche) + fiche (droite) ── */
.dico-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 22px;
  align-items: start;
  margin-top: 22px;
  padding-bottom: 40px;
}

/* La colonne de gauche, elle, reste collée en haut : on lit une fiche longue à
   droite tout en gardant la liste sous les yeux, et on passe d'un mot à l'autre sans
   remonter. Le plafond de hauteur est ici indispensable — collée SANS plafond, une
   liste plus haute que l'écran aurait son bas hors d'atteinte. */
.dico-listwrap {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  /* Le filet de défilement reste discret : la liste est déjà dense. */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding-right: 4px;
}

/* Une seule colonne : la liste porte un classement par pertinence, et deux colonnes
   qui se lisent en zigzag gauche-droite brouilleraient cet ordre. Le vide horizontal
   des cartes est le prix à payer pour garder le rang lisible de haut en bas. */
.dico-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dico-item__b {
  display: grid;
  /* Trois colonnes : le TERME au plus juste, une colonne SOUPLE qui absorbe tout
     l'espace libre, et les PASTILLES à droite au plus juste.

     Le `1fr` du milieu est ce qui tient la mise en page. Sans lui, les trois
     colonnes étaient en `auto` : l'aperçu, qui court sur « terme » + « cat »,
     élargissait ces deux colonnes à sa propre longueur, et la catégorie
     (« nom », « ver »…) se retrouvait poussée à une abscisse différente sur
     chaque ligne — c'est la définition la plus longue qui décidait de la place
     du mot. Avec une colonne souple, l'espace libre lui revient en entier et les
     colonnes `auto` restent dimensionnées par leur seul contenu. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  /* La note occupe la colonne de droite sur la ligne de l'aperçu : elle tombe
     ainsi juste sous le compteur de définitions, les deux pastilles alignées sur
     le même bord. */
  grid-template-areas: "terme cat nb" "apercu apercu note";
  align-items: baseline;
  /* Le corpus « notion » ajoute une troisième ligne, pleine largeur, pour les
     mots communs. Elle n'est déclarée que là : les autres corpus n'ont rien à y
     mettre, et une aire déclarée sans contenu laisserait un `gap` vertical
     parasite sous chaque item. */
}
.dico-item.is-notion .dico-item__b {
  grid-template-areas: "terme cat nb" "apercu apercu note" "communs communs communs";
}
.dico-item__b {
  gap: 2px 10px;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  color: var(--txt);
  font: inherit;
  /* L'item est désormais un LIEN : il en garde le comportement (clic du
     milieu, copie d'adresse) mais pas l'habillage par défaut. */
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.05s ease;
}
.dico-item__b:hover {
  border-color: var(--mut);
  text-decoration: none;
}
.dico-item__b:active {
  transform: translateY(1px);
}
.dico-item__terme {
  grid-area: terme;
  font-weight: 700;
  color: var(--cream);
  font-size: 15px;
}
.dico-item__cat {
  grid-area: cat;
  /* Ancrée au DÉBUT de la colonne souple, donc juste après le terme : sa place
     ne dépend que de la longueur du mot, jamais de celle de la définition. */
  justify-self: start;
  color: var(--mut);
  font-size: 11.5px;
  text-transform: lowercase;
}
.dico-item {
  /* MOTS COMMUNS — pourquoi ce mot est dans la liste (corpus « notion » seul).
     La recherche par le sens rapproche sans jamais dire sur quoi : « xylocope »
     ou « guillaume » paraissent tirés au sort. On montre donc les mots de la
     description qu'on a retrouvés dans la définition — ceux-là même qui ont servi
     à classer. C'est lisible, contrairement à la distance vectorielle qu'on
     s'interdit d'afficher pour la raison inverse : personne ne sait lire un 0,342.

     Un mot sans aucun commun n'affiche RIEN : il est là par proximité de sens
     seule, ce qui est légitime, et une pastille vide serait un aveu illisible. */
}
.dico-item__communs {
  grid-area: communs;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.dico-item__communs i {
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 102, 0, 0.12);
  color: var(--acc);
  font-size: 11px;
  font-style: normal;
  line-height: 17px;
}
.dico-item__nb {
  grid-area: nb;
  justify-self: end;
  min-width: 22px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 102, 0, 0.14);
  color: var(--acc);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.dico-item {
  /* Note de confiance du mot, sur 10 : la qualité de notre article. Elle reprend la
     forme de pastille du compteur, mais en teinte neutre — le compteur de
     définitions garde l'accent orange, qui est l'information première de la ligne.
     La pastille ne dit pas contre quoi la note a été obtenue : les ouvrages qui ont
     servi d'étalon sont sous licence et ne sont pas nommés côté public. */
}
.dico-item__note {
  grid-area: note;
  /* Alignée sur la PREMIÈRE ligne de l'aperçu, pas sur le bas de la cellule :
     l'aperçu court sur une ou deux lignes selon le mot, et un alignement bas
     faisait sauter la pastille d'une ligne à l'autre d'un item au suivant. */
  align-self: baseline;
  /* Sans `justify-self`, le tag s'étirait sur toute sa cellule : sa bande de fond
     courait jusqu'au bord de la carte et il ne tombait plus sous le compteur. */
  justify-self: end;
  padding: 1px 8px;
  border-radius: 999px;
  background: hsla(0, 0%, 100%, 0.07);
  color: #565656;
  font-size: 11.5px;
  white-space: nowrap;
}
.dico-item__apercu {
  grid-area: apercu;
  color: var(--mut);
  font-size: 12.5px;
  line-height: 1.4;
}
.dico-item {
  /* Motif d'une suggestion de repli : pourquoi ce mot est proposé. Discret, sur toute
     la largeur sous l'aperçu, teinté de l'accent secondaire pour se distinguer sans
     crier — l'information est utile, pas centrale. */
}
.dico-item__motif {
  grid-column: 1/-1;
  margin-top: 3px;
  color: var(--acc2);
  font-size: 11.5px;
  font-weight: 600;
}
.dico-item.is-active .dico-item__b {
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc) inset;
}
.dico-item {
  /* Le mot exactement saisi. Une recherche ramène souvent des dizaines de formes
     voisines où il se perd : un liseré latéral et un fond très léger le rattrapent
     à l'œil. Le repère reste distinct de `is-active`, qui marque la fiche ouverte —
     les deux se cumulent sans se confondre, l'un sur le flanc, l'autre au pourtour.
     La graisse épaissit en plus de la couleur : la teinte seule laisserait le repère
     invisible à qui distingue mal le rouge et le vert. */
}
.dico-item.is-cherche .dico-item__b {
  border-left: 3px solid var(--acc);
  padding-left: 12px;
  background: linear-gradient(90deg, rgba(255, 102, 0, 0.1), var(--card) 45%);
}
.dico-item.is-cherche .dico-item__terme {
  color: var(--acc);
  font-weight: 800;
}

.dico-empty {
  color: var(--mut);
  padding: 28px 4px;
  font-size: 14px;
}

/* Bandeau de repli phonétique, en tête de la colonne de gauche. Il reprend la saisie
   fautive et annonce que la liste montre des mots proches à l'oreille. Le liseré
   d'accent le rattache visuellement au reste du cadre sans l'alourdir. */
.dico-bandeau {
  margin: 0 0 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 102, 0, 0.1), var(--card) 60%);
  color: var(--txt);
  font-size: 13.5px;
  line-height: 1.45;
}

/* ── Attente ──
   La liste ne se vide pas pendant le chargement : elle s'estompe et l'indicateur
   tourne par-dessus. Voir l'ancien contenu pâlir renseigne mieux qu'un écran blanc,
   et la page ne sursaute pas à l'arrivée des résultats. */
.dico-list.is-chargement {
  position: relative;
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.dico-list.is-chargement::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 50%;
  margin-left: -13px;
  width: 26px;
  height: 26px;
  border: 2px solid var(--line);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: dico-tourne 0.7s linear infinite;
}

.dico-panel__attente {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.dico-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--line);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: dico-tourne 0.7s linear infinite;
}

@keyframes dico-tourne {
  to {
    transform: rotate(360deg);
  }
}
/* Mouvement réduit : l'indicateur reste visible, mais cesse de tourner. */
@media (prefers-reduced-motion: reduce) {
  .dico-spinner,
  .dico-list.is-chargement::after {
    animation: none;
  }
}
.dico-more {
  margin-top: 14px;
  width: 100%;
  padding: 11px;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--mut);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.dico-more:hover {
  color: var(--txt);
  border-color: var(--mut);
}

/* ── Panneau de lecture ── */
/* Aucune hauteur plafonnée ici, donc aucun ascenseur propre au panneau : une fiche
   longue (« famille de mots » peut aligner 80 termes) s'étend, et c'est la page qui
   défile. Deux barres de défilement imbriquées obligent à viser la bonne. */
.dico-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 28px;
  min-height: 160px;
}
.dico-panel__empty {
  color: var(--mut);
  font-size: 16px;
  padding: 24px 4px;
  text-align: center;
}

/* ── Le mode d'emploi de la liste ── */
/* Il occupe le panneau tant qu'aucune fiche n'est ouverte. Volontairement discret :
   c'est une aide de départ, pas un contenu — dès qu'un mot est choisi, la fiche
   prend toute la place et la légende disparaît sans laisser de trace. */
.dico-legende {
  color: var(--mut);
  font-size: 14px;
}
.dico-legende__t {
  margin: 0 0 16px;
  color: var(--cream);
  font-size: 15px;
  font-weight: 700;
}
.dico-legende {
  /* Deux colonnes : le signe à gauche, ce qu'il veut dire à droite. La colonne des
     signes se dimensionne sur le plus large d'entre eux (`max-content`) — une
     largeur fixe aurait rogné « Notices au texte relu » ou laissé un vide devant
     une simple pastille. */
}
.dico-legende__l {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 14px;
  margin: 0;
}
.dico-legende__l dt {
  color: var(--txt);
  font-size: 13px;
  font-weight: 600;
  /* Les pastilles d'exemple sortent ici de la grille de la liste, où elles
     tenaient leur forme d'un `grid-area` : sans mise en bloc, leur fond se
     collerait au texte sans marge haute ni basse. */
}
.dico-legende__l dt .dico-item__nb,
.dico-legende__l dt .dico-item__cat,
.dico-legende__l dt .dico-item__note {
  display: inline-block;
}
.dico-legende__l dd {
  margin: 0;
  /* Aligné sur la ligne de base du signe en regard, et non sur le haut de la
     cellule : les deux colonnes n'ont pas la même taille de texte. */
  align-self: baseline;
  line-height: 1.45;
}
.dico-legende__p {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  line-height: 1.5;
}

.dico-fiche__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  /* Les actions (confort de lecture + écoute) filent au bout de la ligne d'en-tête. */
}
.dico-fiche__head .dico-fiche__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dico-fiche__ortho {
  margin: 0;
  font-size: 31px;
  color: var(--cream);
  letter-spacing: -0.4px;
}
.dico-fiche__cgram {
  color: var(--mut);
  font-size: 15px;
}
.dico-fiche {
  /* L'ÂGE DU MOT dans la ligne d'en-tête, entre la nature et la prononciation :
     « n. m. 1680 /fwaje/ ». Une pastille plutôt qu'une mention en clair — la
     date est un repère qu'on cherche du regard, pas une phrase qu'on lit. Le
     fond la détache sans couleur d'accent : elle reste au rang des deux autres
     renseignements, elle ne les domine pas. */
}
.dico-fiche__age {
  color: var(--mut);
  font-size: 14px;
  min-width: 22px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-weight: 700;
}
.dico-fiche__ipa {
  color: var(--acc2);
  font-size: 16.5px;
}
.dico-fiche__dat {
  margin: 10px 0 0;
  color: var(--mut);
  font-size: 14px;
}
.dico-fiche__dat.is-douteux {
  color: var(--acc2);
}

/* Bouton de lecture à voix haute (synthèse vocale du navigateur) */
.dico-ecouter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  align-self: center;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--mut);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.dico-ecouter:hover {
  border-color: var(--acc2);
  color: var(--cream);
}
.dico-ecouter {
  /* Triangle de lecture, dessiné en bordures : pas d'image à charger. */
}
.dico-ecouter__ico {
  width: 0;
  height: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 2px;
}
.dico-ecouter {
  /* Pendant la lecture : le triangle devient un carré d'arrêt. */
}
.dico-ecouter.is-lecture {
  border-color: var(--acc);
  color: var(--acc);
}
.dico-ecouter.is-lecture .dico-ecouter__ico {
  width: 10px;
  height: 10px;
  border: 0;
  margin-left: 0;
  background: currentColor;
  border-radius: 2px;
}

/* Bascule « lecture confortable » — bouton on/off discret, icône « Aa ». Même
   gabarit rond que l'écoute, mais icône seule : il ne réclame pas l'attention. */
.dico-confort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--mut);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.dico-confort-btn:hover {
  border-color: var(--acc2);
  color: var(--cream);
}
.dico-confort-btn:focus-visible {
  outline: 2px solid var(--acc2);
  outline-offset: 2px;
}
.dico-confort-btn__ico {
  display: block;
}
.dico-confort-btn {
  /* État actif : le confort est en cours, le bouton s'allume à l'accent. */
}
.dico-confort-btn.is-on {
  border-color: var(--acc);
  color: var(--acc);
  background: rgba(255, 102, 0, 0.1);
}

/* Tout déplier / tout replier — voisin du confort de lecture, et de même facture :
   deux commandes de confort côte à côte doivent se ressembler, sans quoi la
   seconde a l'air d'appartenir à un autre écran.

   L'état allumé dit « tout est ouvert », et donc que le prochain clic replie. */
.dico-volets-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--mut);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.dico-volets-btn:hover {
  border-color: var(--acc2);
  color: var(--cream);
}
.dico-volets-btn:focus-visible {
  outline: 2px solid var(--acc2);
  outline-offset: 2px;
}
.dico-volets-btn svg {
  display: block;
}
.dico-volets-btn.is-on {
  border-color: var(--acc);
  color: var(--acc);
  background: rgba(255, 102, 0, 0.1);
}

/* Renvoi à la forme principale, sur les fiches de flexions */
.dico-parent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--mut);
  font-size: 14.5px;
}

/* Sections repliables de la fiche */
.acc {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  margin-top: 10px;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
  /* Ouvert : un liseré chaud mais éteint — l'orange plein cerclait chaque
     volet déplié et fatiguait la page dès deux sections ouvertes. */
}
.acc.is-open {
  border-color: rgba(89, 79, 72, 0.35);
  background: rgba(255, 255, 255, 0.03);
}
.acc__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--cream);
  font: inherit;
  text-align: left;
}
.acc__head:hover {
  background: rgba(255, 255, 255, 0.03);
}
.acc__title {
  font-size: 14.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--acc2);
}
.acc__count {
  min-width: 22px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 102, 0, 0.14);
  color: var(--acc);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}
.acc__chev {
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--mut);
  border-bottom: 2px solid var(--mut);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: none;
}
.acc.is-open .acc__chev {
  transform: rotate(-135deg);
}
.acc {
  /* Révélation douce : grid 0fr → 1fr (pas de hauteur à calculer). */
}
.acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
.acc.is-open .acc__body {
  grid-template-rows: 1fr;
}
.acc__inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 14px;
}
.acc.is-open .acc__inner {
  padding: 2px 14px 14px;
}
.acc {
  /* VOLET À ONGLETS — l'en-tête n'est plus un titre mais une barre de choix.
     Le padding descend du bandeau vers chaque onglet : c'est lui qui doit être
     cliquable sur toute sa hauteur, sinon le trait d'activité flotte au-dessus
     d'une zone morte. */
}
.acc__head--onglets {
  padding: 0;
  gap: 0;
  cursor: default;
  /* À trois onglets dans un panneau étroit, la barre déborde. Elle passe à la
     ligne par ONGLETS ENTIERS — sans quoi c'est le libellé qui se coupe en son
     milieu (« MOTS / PROCHES »), ce qui se lit comme deux onglets. */
  flex-wrap: wrap;
}
.acc__head--onglets:hover {
  background: none;
}
.acc__onglet {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.acc__onglet:hover {
  background: rgba(255, 255, 255, 0.03);
}
.acc__onglet:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}
.acc__onglet .acc__title {
  white-space: nowrap;
}
.acc__onglet {
  /* Face non choisie : le titre s'éteint. Sans cela les deux entrées ont la
     même couleur et rien ne dit laquelle est affichée. */
}
.acc__onglet:not(.is-actif) .acc__title {
  color: var(--mut);
}
.acc__onglet:not(.is-actif) .acc__count {
  background: rgba(255, 255, 255, 0.06);
  color: var(--mut);
}
.acc__onglet.is-actif {
  border-bottom-color: var(--acc);
}
.acc {
  /* Un seul onglet : c'est le titre du volet, pas un choix — pas de soulignement. */
}
.acc--une-face .acc__onglet {
  border-bottom-color: transparent;
}
.acc__replier {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.acc__replier:hover .acc__chev {
  border-color: var(--cream);
}
.acc__replier:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}
.acc__replier .acc__chev {
  margin-left: 0;
}
.acc__panneau[hidden] {
  display: none;
}

.dico-hint2 {
  margin: 4px 0 10px;
  color: var(--mut);
  font-size: 14px;
}

/* Le son de fin d'une rime, en badge phonétique dans la phrase d'aide. */
.dico-rime-son {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 8px;
  border-radius: 6px;
  background: rgba(245, 200, 0, 0.12);
  color: var(--acc2);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: baseline;
}

/* Définitions */
/* Les définitions sont le cœur de la fiche : elles portent la plus grande taille de
   texte courant du panneau, au-dessus de l'étymologie et des chips qui les entourent. */
/* L'explication d'une locution — même parti que sur la page : la glose recule
   d'un ton pour que la tête se lise comme l'emploi qu'elle est. */
.dico-def__glose {
  color: var(--mut);
}

.dico-defcat {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 14px 0 6px;
  color: #48f116;
  font-size: 14.5px;
  font-weight: 600;
}

/* Le compte du groupe : il dit avant la lecture si la catégorie pèse trois sens
   ou trente-cinq. Discret — c'est un repère, pas une information de premier plan. */
.dico-defcat__nb {
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mut);
  font-size: 12px;
  font-weight: 400;
}

/* Les emplois de métier, repliés. `<details>` natif : aucun écouteur à poser, et
   le contenu reste dans le DOM même fermé. */
.dico-defmetier {
  margin: 0 0 12px;
}
.dico-defmetier__ouvrir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mut);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}
.dico-defmetier__ouvrir::-webkit-details-marker {
  display: none;
}
.dico-defmetier__ouvrir::before {
  content: "▸";
  font-size: 10px;
}
.dico-defmetier__ouvrir:hover {
  border-color: var(--acc);
  color: var(--acc);
}
.dico-defmetier[open] > .dico-defmetier__ouvrir::before {
  content: "▾";
}
.dico-defmetier[open] > .dico-defmetier__ouvrir {
  margin-bottom: 8px;
}

.dico-defs {
  margin: 0 0 10px;
  padding-left: 26px;
}
.dico-defs li.dico-def {
  color: var(--cream);
  font-size: 18.5px;
  line-height: 1.62;
  margin-bottom: 10px;
}
.dico-defs li.dico-def::marker {
  color: var(--mut);
  font-size: 15px;
}

/* Badge de registre devant un sens (argot, familier, vieilli…) : discret, en petites
   capitales, pour situer le niveau de langue sans alourdir la définition. */
/* Domaine du sens, dans le panneau de lecture. Même forme que le registre qu'il
   côtoie, mais teinte froide contre sa teinte chaude : sur une même ligne, deux
   badges identiques se liraient comme une seule information redoublée. */
.dico-dom {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(120, 170, 255, 0.1);
  color: #7aa7d9;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.dico-reg {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(245, 200, 0, 0.1);
  color: var(--acc2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Étymologie */
.dico-etym {
  padding: 6px 0;
}
.dico-etym + .dico-etym {
  border-top: 1px dashed var(--line);
}
.dico-etym__src {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}
.dico-etym__lang {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--acc2);
  background: rgba(245, 200, 0, 0.12);
  padding: 2px 7px;
  border-radius: 6px;
}
.dico-etym__etymon {
  color: var(--cream);
  font-size: 16.5px;
}
.dico-etym__tr {
  color: var(--mut);
  font-style: normal;
  font-size: 14px;
}
.dico-etym__glose {
  color: var(--mut);
  font-size: 14px;
}
.dico-etym__txt {
  margin: 2px 0 0;
  color: var(--txt);
  font-size: 14.5px;
  line-height: 1.6;
}

/* La citation se lit pour elle-même : elle prend la couleur du texte principal et
   une barre qui la détache, là où les définitions restent en liste sobre. Aucun
   guillemet ajouté — les citations en portent parfois déjà. */
.dico-cit {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--acc2);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.03);
}
.dico-cit:last-child {
  margin-bottom: 0;
}
.dico-cit__t {
  margin: 0;
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream);
}
.dico-cit__src {
  margin: 7px 0 0;
  font-size: 12.5px;
  color: var(--mut);
}
.dico-cit__src::before {
  content: "— ";
}
.dico-cit__oeuvre {
  font-style: italic;
}

/* Relations, famille, prononciation */
.dico-relgrp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}

.dico-rellab {
  /* Vert vif : les sous-titres (Synonymes, Contraires…) se détachaient mal en gris
     muet sur le fond de fiche. */
  color: #48ff00;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 128px;
  flex: none;
}

.dico-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* ── Notices des corpus latin, grec et proverbes, dans le panneau de droite ──
   Une seule mise en forme pour les trois : ce sont tous des blocs de texte suivi
   avec leur provenance, là où la fiche du français s'organise par sens et par
   attribut. Elle reprend celle de leurs pages pleines. */
.corpus-notice + .corpus-notice {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.corpus-notice__t {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--acc);
}
.corpus-notice__t sup {
  font-size: 11px;
  margin-left: 1px;
}
.corpus-notice {
  /* La catégorie grammaticale, à côté du lemme et non dessous : elle qualifie le
     mot, elle n'est pas une information à part. */
}
.corpus-notice__c {
  margin-left: 8px;
  color: var(--mut);
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
}
.corpus-notice__x {
  margin: 0 0 6px;
  line-height: 1.55;
}
.corpus-notice__r {
  margin: 8px 0 2px;
  color: var(--mut);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.corpus-notice {
  /* La provenance : l'ouvrage, la page, la colonne. Discrète, mais jamais absente —
     une numérisation sans sa référence ne se vérifie pas sur le fac-similé. */
}
.corpus-notice__s {
  margin: 6px 0 0;
  color: var(--mut);
  font-size: 12px;
  font-style: italic;
}
.corpus-notice {
  /* Ce qui n'est pas encore publié le dit, plutôt que de laisser un bloc vide qui
     se lirait comme une notice sans contenu. */
}
.corpus-notice__attente {
  margin: 0;
  color: var(--mut);
  font-size: 13px;
  font-style: italic;
}

/* ── L'ÂGE DU MOT ──
   Le libellé et la frise, posés sous l'en-tête de la fiche. Discret : c'est un
   repère, pas le sujet de la page. La barre elle-même est dessinée par la lib
   /assets/echelle/ ; on ne lui donne ici qu'une place et une respiration. */
.dico-age {
  margin: 0 0 14px;
}
.dico-age__l {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}
.dico-age__r {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mut);
  white-space: nowrap;
}
.dico-age__v {
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
}
.dico-age {
  /* La frise n'est pas dessinée tant que la lib n'a pas répondu. Sans hauteur
     réservée, la fiche sursauterait à son arrivée — le texte déjà lu se
     déplacerait sous les yeux du lecteur. */
}
.dico-age .mf-echelle {
  min-height: 46px;
  margin-top: 2px;
}

/* Sur la fiche pleine page, la frise précède « Origine du mot » — même voisinage
   que dans le panneau. Même réserve de hauteur, pour la même raison : sans elle
   la page sursauterait quand la lib répond. Elle sépare deux sections, donc elle
   respire des deux côtés. */
.fiche__age {
  min-height: 46px;
  margin: 26px 0 6px;
}

/* ── Fiche du JARGON métier ──────────────────────────────────────────────────
   Un terme de métier n'a pas un sens mais un par CONTEXTE d'emploi : la fiche
   empile des blocs, chacun nommant son savoir-faire. D'où une mise en forme
   propre — la fiche du lexique français, elle, s'organise par sens et par
   attribut, et lui emprunter ses classes aurait fait mentir les deux. */
.fiche-jargon__ctx + .fiche-jargon__ctx {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.fiche-jargon__sf {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--acc);
}

.fiche-jargon__def {
  margin: 0;
  line-height: 1.5;
}

/* Le « bon à savoir » n'est pas la définition : c'est un enjeu concret (coût caché,
   obligation, risque). Il se distingue sans crier — un filet à gauche suffit. */
.fiche-jargon__bas {
  margin: 8px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--acc2);
  color: var(--mut);
  font-size: 13px;
  line-height: 1.45;
}

/* Les métiers qui pratiquent ce savoir-faire, en étiquettes. Sans `gap`, elles se
   collaient les unes aux autres et se lisaient comme un seul mot. */
.fiche-jargon__metiers,
.fiche-jargon__champ {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}

.fiche-jargon__metier {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mut);
  font-size: 12px;
  /* Le métier « cœur » est celui dont le terme relève d'abord ; les autres ne font
     que l'employer. La nuance est dans la donnée, elle mérite de se voir. */
}
.fiche-jargon__metier.is-coeur {
  border-color: var(--acc);
  color: var(--cream);
}

/* Le pont vers le lexique français : ces mots-là ont une fiche, ce sont de vrais
   liens — contrairement aux étiquettes de métier ci-dessus. */
.fiche-jargon__mot {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--cream);
  font-size: 12.5px;
  text-decoration: none;
}
.fiche-jargon__mot:hover {
  border-color: var(--acc);
  color: var(--acc);
}

/* LES VOISINS DE SENS d'un terme de métier. Ils ne prennent pas la forme des
   étiquettes ci-dessus, et c'est délibéré : une puce nue — « Naissance d'eaux
   pluviales » — n'apprend rien à qui ne connaît pas déjà le métier. La définition
   qui les a rapprochés est donc lisible d'emblée, et le service entre crochets dit
   de quel geste on parle : le même mot ne veut pas dire la même chose au couvreur
   et au maçon. */
.fiche-jargon__note {
  margin: 0 0 12px;
  color: var(--mut);
  font-size: 13px;
  line-height: 1.45;
}

.fiche-jargon__voisins {
  margin: 0;
}

.fiche-jargon__voisin + .fiche-jargon__voisin {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.fiche-jargon__voisin dt {
  margin: 0 0 3px;
  font-size: 14.5px;
}
.fiche-jargon__voisin dt a {
  color: var(--cream);
  font-weight: 700;
  text-decoration: none;
}
.fiche-jargon__voisin dt a:hover {
  color: var(--acc);
}
.fiche-jargon__voisin dd {
  margin: 0;
  max-width: 70ch;
  color: var(--mut);
  font-size: 13.5px;
  line-height: 1.5;
}

.fiche-jargon__voisin-svc {
  margin-left: 8px;
  color: var(--acc2);
  font-size: 12px;
  font-weight: 400;
}

.dico-fam__racine {
  margin: 0 0 8px;
  color: var(--mut);
  font-size: 14px;
}
.dico-fam__racine b {
  color: var(--acc2);
}

.dico-word {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--txt);
  font: inherit;
  font-size: 14.5px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.dico-word:hover {
  border-color: var(--acc2);
  color: var(--cream);
}
.dico-word__o {
  font-weight: 600;
}
.dico-word__c {
  color: var(--mut);
  font-style: normal;
  font-size: 12.5px;
}
.dico-word {
  /* Cible non résolue en base : le mot s'affiche, mais ne mène nulle part. */
}
.dico-word.is-flat {
  color: var(--mut);
  cursor: default;
}
.dico-word.is-flat:hover {
  border-color: var(--line);
  color: var(--mut);
}

.dico-phon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.dico-phon__ipa {
  font-size: 19px;
  color: var(--cream);
  font-weight: 600;
}
.dico-phon__rime {
  font-size: 13.5px;
  color: var(--mut);
}

/* ── Détails lexicaux ──
   Un vrai tableau de quatre colonnes : deux paires clé/valeur par rangée. Les
   attributs (`display: contents`) s'effacent au profit de leurs deux cellules, qui
   deviennent des éléments de grille — les étiquettes s'alignent donc d'une rangée à
   l'autre, ce qu'une suite de blocs indépendants ne garantit pas. Le filet est posé
   en haut des cellules : en bas, il pendrait sous la dernière rangée. */
.dico-attrs {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  column-gap: 20px;
  padding: 2px 0;
}

.dico-attr {
  display: contents;
}
.dico-attr__k, .dico-attr__v {
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.4;
}
.dico-attr__k {
  color: var(--mut);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.dico-attr__v {
  color: var(--cream);
  overflow-wrap: anywhere;
}

/* `.acc--proches` teintait le volet « Mots proches ». Ce volet n'existe plus : les
   mots proches sont le deuxième onglet de la tuile d'entrée, où c'est l'onglet actif
   qui porte la couleur. La règle est retirée plutôt que laissée sans cible. */
/* Bascule « Lecture confortable », posée à droite au-dessus des deux colonnes. */
/* ── Mode lecture confortable ──
   Agrandit et espace le texte de la fiche. Les valeurs d'espacement sont celles du
   critère WCAG 1.4.12 (interligne ≥ 1.5, lettres ≥ 0.12em, mots ≥ 0.16em) ; la taille
   monte d'un cran. Cantonné au panneau de lecture : la liste et le moteur, denses par
   nature, ne gagneraient rien à s'étirer. */
.dicopage.is-confort .dico-panel {
  font-size: 1.08em;
}
.dicopage.is-confort .dico-def,
.dicopage.is-confort .dico-etym__txt,
.dicopage.is-confort .dico-attr,
.dicopage.is-confort .dico-parent,
.dicopage.is-confort .dico-hint2 {
  line-height: 1.6;
  letter-spacing: 0.04em;
  word-spacing: 0.08em;
}
.dicopage.is-confort .dico-def {
  font-size: 20px;
  line-height: 1.7;
  letter-spacing: 0.05em;
  word-spacing: 0.16em;
  margin-bottom: 13px;
}
.dicopage.is-confort .dico-fiche__ortho {
  font-size: 34px;
}
.dicopage.is-confort .dico-defcat {
  font-size: 16px;
}
.dicopage.is-confort .dico-etym__txt,
.dicopage.is-confort .dico-etym__etymon {
  font-size: 16px;
}
.dicopage.is-confort {
  /* Les pastilles de mots s'aèrent aussi : cibles plus grandes, plus faciles à viser. */
}
.dicopage.is-confort .dico-word {
  font-size: 16px;
  padding: 8px 15px;
}

@media (max-width: 860px) {
  /* Le champ garde la largeur ; le bouton et le cadran passent dessous. Le cadran
     prend sa rangée pleine largeur : à 268px il ne tient plus à côté du bouton. */
  .dicopage .dico-searchrow {
    grid-template-columns: 1fr auto;
    row-gap: 10px;
  }
  .dicopage .dico-searchrow .dico-field {
    grid-column: 1/-1;
  }
  .dicopage .dico-searchrow .dico-mode {
    grid-column: 1/-1;
    justify-self: center;
  }
  /* Une seule colonne : plus rien à garder sous les yeux, le collage n'a plus d'objet
     et enfermerait la liste dans une fenêtre étroite au milieu de l'écran. */
  .dico-layout {
    grid-template-columns: 1fr;
  }
  .dico-listwrap {
    position: static;
    max-height: none;
    overflow: visible;
  }
  /* Plus assez de large pour deux paires : une seule par rangée. */
  .dico-attrs {
    grid-template-columns: max-content minmax(0, 1fr);
  }
}
/* ── Origine du mot : le contenu des deux faces ────────────────────────────
   La barre d'onglets, elle, est l'en-tête du volet lui-même — voir
   `.acc__head--onglets` plus haut. */
.dico-parente__racine {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--mut);
}
.dico-parente__racine b {
  color: var(--acc2);
  font-weight: 600;
}
.dico-parente__bloc + .dico-parente__bloc {
  margin-top: 16px;
}
.dico-parente__titre {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--acc2);
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.dico-parente__n {
  color: var(--mut);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.dico-parente__n::before {
  content: "(";
}
.dico-parente__n::after {
  content: ")";
}
.dico-parente {
  /* La légende du titre : ce que la liste compte, et ce qu'elle ne prouve pas. */
}
.dico-parente__legende {
  margin: -2px 0 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mut);
  max-width: 62ch;
}
.dico-parente {
  /* Deux colonnes dès qu'il y a la place : deux cents pays sur une colonne
     feraient défiler le panneau sur plusieurs écrans. */
}
.dico-parente__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0 16px;
}
.dico-parente__item {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 2px 0;
  font-size: 13px;
  border-bottom: 1px dotted var(--bor, rgba(128, 128, 128, 0.18));
}
.dico-parente__cle {
  color: var(--mut);
  font-size: 11.5px;
  flex: none;
  min-width: 6.5em;
}
.dico-parente__val {
  color: var(--txt);
}

/* Le lien vers la page d'un terme, dans l'en-tête de sa fiche du panneau.
   Discret : le panneau reste le lieu de lecture, la page est un ailleurs
   qu'on propose sans l'imposer. */
.fiche__lien-page {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--mut);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.fiche__lien-page:hover, .fiche__lien-page:focus-visible {
  color: var(--acc);
}

/*# sourceMappingURL=dictionnaire.css.map*/