@charset "UTF-8";
/* ---------------------------------------------------------------------------
   Dictionnaire chinois — habillage propre à la rubrique
   ===========================================================================

   Le dictionnaire est la page la plus visitée du site. Cette feuille ne change
   pas un mot du contenu : elle rend au portage ce que la version de 2005 faisait
   mieux, et corrige ce qu'elle faisait mal.

   Ce qui est repris de l'original (relevé sur chine.in/mandarin/dictionnaire/) :

     - le caractère chinois domine la ligne (22 px là-bas, 40 px pour l'entrée
       vedette) : c'est l'objet de la page, pas une colonne parmi d'autres ;
     - la ligne est dense — 41 px de haut — parce qu'on compare des dizaines de
       traductions d'un coup d'œil ; le portage était monté à 63 px, soit un
       tiers de résultats en moins par écran ;
     - la colorisation par ton (`.c1` à `.c4` : rouge, orange, vert, bleu) était
       le repère visuel signature de la rubrique ;
     - l'entrée exacte était affichée en grand, au-dessus des autres ;
     - la fiche caractère groupait ses données (radical / composition / méthodes
       d'entrée / encodages / HSK) au lieu de les aligner à plat.

   Ce qui change, parce que l'original avait tort :

     - le tableau ne défile plus latéralement au téléphone : sous 700 px chaque
       entrée devient une fiche empilée, sans perdre une seule information. Le
       portage y montrait « Chinois » et « Pinyin », la traduction hors écran ;
     - les cibles tactiles font 44 px au doigt.
   --------------------------------------------------------------------------- */

/* ==========================================================================
   01. La fonte des caractères chinois
   ========================================================================== */

/*
 * Un caractère chinois dessiné à la taille du texte latin est illisible : il
 * porte jusqu'à trente traits dans le carré d'un « o ». Les typographies CJK
 * sont donc rendues ici ~15 % plus grandes que le latin qui les entoure, sans
 * toucher au balisage : `size-adjust` s'applique à la fonte, `unicode-range`
 * la restreint aux blocs chinois. Le texte français, lui, ne bouge pas.
 *
 * `local()` seulement : aucune police n'est téléchargée, aucune requête tierce.
 * Les navigateurs qui ignorent `size-adjust` (Safari < 17) retombent sur la
 * pile CJK habituelle — plus petite, mais correcte.
 */
@font-face {
    font-family: "CJK Dico";
    src: local("PingFang SC"), local("Hiragino Sans GB"), local("Microsoft YaHei"),
        local("Noto Sans SC"), local("Source Han Sans SC"), local("Heiti SC");
    size-adjust: 115%;
    unicode-range: U+2E80-2EFF, U+3000-303F, U+3200-4DBF, U+4E00-9FFF,
        U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;
}

/*
 * Repli pour les caractères rares. Les fontes sans-serif chinoises courantes
 * couvrent le plan de base ; les extensions B à F (U+20000 et au-delà), qu'on
 * croise dans les noms propres et les entrées anciennes du dictionnaire, ne
 * sont dessinées que par les Song/Ming et par les fontes japonaises étendues.
 * Sans ce repli, ces entrées s'affichent en tofu — des rectangles vides.
 */
@font-face {
    font-family: "CJK Dico Rare";
    src: local("Songti SC"), local("Noto Serif SC"), local("Source Han Serif SC"),
        local("SimSun"), local("STSong"), local("Hiragino Mincho ProN"),
        local("Yu Mincho"), local("MS Mincho"), local("Batang");
    size-adjust: 112%;
    unicode-range: U+3400-4DBF, U+20000-2FA1F;
}

:root {
    /* Pile complète : latin d'abord (il ne couvre pas le chinois, donc il ne
       capte jamais un idéogramme), puis les deux fontes ajustées, puis les
       noms réels en dernier recours. */
    --dico-police-cjk: "CJK Dico", "CJK Dico Rare", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Songti SC",
        "SimSun", sans-serif;
}

/*
 * `--ton-1`…`--ton-4` ne sont **pas** définis ici. Ils l'étaient, et le
 * dictionnaire teintait donc ses caractères autrement que le colorisateur, qui
 * portait ses propres valeurs en dur dans `site.css` : deux jeux de couleurs
 * pour un même code, et une légende qui ne pouvait dire vrai que sur l'une des
 * deux pages. Ils vivent désormais dans `site.css`, seule feuille chargée
 * partout ; le raisonnement qui fixe leurs valeurs y est écrit en entier.
 */

/* La pile s'applique partout où du chinois est balisé comme tel. */
.page-dictionnaire .chinois,
.page-dictionnaire [lang^="zh"],
.page-dictionary .chinois,
.page-dictionary [lang^="zh"] {
    font-family: var(--dico-police-cjk);
    /* Les idéogrammes ne se coupent pas comme des mots. */
    line-height: 1.35;
}

/* ==========================================================================
   02. Le tableau des résultats
   ========================================================================== */

/*
 * Densité. L'original tenait une entrée en 41 px ; le portage en demandait 63.
 * Sur une recherche courante (« maison » : 300 entrées) cela fait sept résultats
 * de moins par écran — sur la page la plus consultée du site.
 */
.page-dictionary .table-dico th,
.page-dictionary .table-dico td {
    padding: 0.4rem 0.75rem;
    vertical-align: middle;
}

/*
 * Le cadre du tableau ne défile plus latéralement : en disposition fixe la
 * table ne dépasse jamais sa colonne. C'est aussi ce qui permet à l'en-tête de
 * coller — `position: sticky` est sans effet dans un conteneur à défilement.
 */
.page-dictionary .table-defilante {
    overflow: visible;
    background-image: none;
}

/* L'en-tête reste, contrairement à l'original qui n'en avait pas : sans lui, un
   lecteur d'écran annonce trois cellules sans dire ce qu'elles contiennent.
   Il est discret, et il tient sous la barre de navigation quand on descend une
   liste de 2 515 lignes. */
.page-dictionary .table-dico thead th {
    position: sticky;
    top: var(--hauteur-barre, 52px);
    z-index: 2;
    padding: 0.35rem 0.75rem;
    background: var(--surface-douce);
    box-shadow: inset 0 -1px 0 var(--bord-fort);
    border-bottom: 0;
}

/* Le cadre `.table-defilante` est arrondi (site.css) mais ne clippe pas
   (`overflow: visible`, exigé par l'en-tête sticky) : sans arrondir ses coins
   hauts, le fond gris de l'en-tête débordait du bord arrondi et le coin paraissait
   cassé. On raccorde l'en-tête au cadre (rayon moins le filet d'1 px du cadre). */
.page-dictionary .table-dico thead th:first-child {
    border-top-left-radius: calc(var(--rayon) - 1px);
}

.page-dictionary .table-dico thead th:last-child {
    border-top-right-radius: calc(var(--rayon) - 1px);
}

/*
 * Les largeurs de colonne. L'original les fixait à 170 / 170 / 370 / 50 px dans
 * une page de 800 : la traduction, qui est la réponse, avait la moitié de la
 * ligne. Le portage laissait l'algorithme automatique répartir le surplus à
 * parts égales, et la colonne du chinois occupait 216 px pour afficher deux
 * caractères. Trois colonnes sont donc dimensionnées, la quatrième — la
 * traduction — prend tout ce qui reste.
 *
 * `table-layout: fixed` est nécessaire : en disposition automatique, une largeur
 * déclarée n'est qu'une préférence, et le surplus se redistribue sur toutes les
 * colonnes. C'est aussi ce qui rend HSK 6 tenable — le navigateur n'a plus à
 * mesurer 2 515 lignes avant de dessiner la première.
 */
.page-dictionary .table-dico {
    table-layout: fixed;
    width: 100%;
}

/* En disposition fixe, seules les largeurs de la *première* ligne comptent :
   ce sont donc les cellules d'en-tête qui portent la mesure. */
.page-dictionary .table-dico thead th:nth-child(1) { width: 10rem; }
.page-dictionary .table-dico thead th:nth-child(2) { width: 11rem; }
.page-dictionary .table-dico thead th:nth-child(4) { width: 4.5rem; }

/* En disposition fixe une colonne ne s'élargit plus : un mot trop long doit
   pouvoir se couper plutôt que déborder. */
.page-dictionary .table-dico td {
    overflow-wrap: anywhere;
}

/* Le chinois : dominant, jamais rogné, et libre de passer à la ligne quand
   l'entrée est une phrase entière. */
.page-dictionary .table-dico .hanzi {
    font-size: 1.75rem;
    line-height: 1.25;
    padding-right: 0.5rem;
    /*
     * CETTE LIGNE ANNULE `site.css` — `.table-dico .hanzi` y pose
     * `white-space: nowrap`, et il a raison partout ailleurs.
     *
     * Un tableau en disposition **automatique** — ceux des outils, du
     * traducteur, des prénoms — répond au `nowrap` en élargissant la colonne
     * jusqu'à ce que le contenu tienne. C'est exactement ce qu'on veut d'un
     * caractère isolé : il ne se coupe pas, et rien ne déborde.
     *
     * Le dictionnaire, lui, est en `table-layout: fixed` (voir plus haut, et la
     * raison y est écrite : le navigateur n'a plus à mesurer 2 515 lignes avant
     * de dessiner la première). Une colonne fixe ne s'élargit plus. Le `nowrap`
     * n'a alors plus qu'un seul effet possible : sortir de la cellule. Il
     * l'emportait sur le `overflow-wrap: anywhere` posé juste en dessous —
     * `overflow-wrap` ne choisit *où* couper qu'une fois la coupure autorisée,
     * et `nowrap` la refuse d'abord.
     *
     * Le symptôme : `中共中央办公厅`, sept caractères à 28 px, débordait sa
     * colonne de 10 rem et recouvrait le pinyin **et** la traduction. Les
     * entrées de cinq caractères passaient encore — d'où un correctif qui
     * semblait tenir alors qu'il ne faisait rien.
     *
     * Aucune entrée courte n'est affectée : à 160 px de colonne il faut plus de
     * cinq caractères pour qu'une coupure devienne seulement possible.
     */
    white-space: normal;
}

.page-dictionary .table-dico .hanzi a {
    color: var(--encre);
    text-decoration: none;
    display: inline-block;
    /*
     * POURQUOI CES DEUX LIGNES — un `inline-block` prend la largeur de son
     * contenu et ne la rend pas. Le `overflow-wrap: anywhere` posé sur la
     * cellule ne le traverse donc pas : une entrée longue — et il y en a
     * **8 778 de plus de douze caractères**, jusqu'à trente-neuf — sortait de
     * sa colonne de 10 rem et se superposait au pinyin et à la traduction.
     *
     * `中部非洲土着和农民社区农林协调员` en est le cas type : seize caractères
     * écrits sans une espace, donc aucun point de coupure naturel. Le chinois
     * n'en offre jamais : sans consigne explicite, le navigateur n'a pas le
     * droit de couper entre deux idéogrammes.
     */
    max-width: 100%;
    overflow-wrap: anywhere;
}

.page-dictionary .table-dico .hanzi a:hover,
.page-dictionary .table-dico .hanzi a:focus-visible {
    color: var(--marque-encre);
    text-decoration: none;
}

/*
 * L'entrée vedette — celle dont la saisie est la traduction exacte — était
 * affichée à 40 px par le programme d'origine, deux fois plus grosse que les
 * suivantes. C'est le mot qu'on est venu chercher : il se voit avant les autres.
 */
.table-dico--vedette tbody tr:first-child .hanzi {
    font-size: 2.6rem;
}

.table-dico--vedette tbody tr:first-child .dico-pinyin {
    font-size: var(--t-lg);
}

/* Le pinyin : lisible, ses accents de ton nets, sans crier plus fort que le
   caractère. Le rouge vif du portage entrait en concurrence avec lui. */
.page-dictionary .table-dico .pinyin {
    font-weight: 500;
    color: var(--encre-douce);
    /*
     * Même annulation que pour `.hanzi` ci-dessus, et pour la même raison — mais
     * la coupure y est plus facile : le pinyin sépare ses syllabes par une
     * espace, donc le navigateur a des points de coupure naturels et n'a jamais
     * à casser une syllabe en deux.
     *
     * Il fallait la lever quand même. `zhōng gòng zhōng yāng bàn gōng tīng`
     * mesure 268 px dans une colonne de 176 : sans cette ligne il sortait par la
     * droite exactement comme le chinois, et venait se poser sur la traduction.
     */
    white-space: normal;
}

.page-dictionary .dico-pinyin {
    font-size: var(--t-md);
    letter-spacing: 0.01em;
}

.page-dictionary .table-dico .traduction {
    line-height: 1.45;
    color: var(--encre);
}

/* Zébrage : sur une liste HSK de 2 515 lignes, l'œil perd la ligne sans lui.
   L'écart de luminance reste sous 2 % — assez pour guider, pas pour salir. */
.page-dictionary .table-dico tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--encre) 3%, transparent);
}

.page-dictionary .table-dico tbody tr:hover {
    background: color-mix(in srgb, var(--teinte-chinois) 9%, var(--surface));
}

/* Une ligne survolée ou ciblée au clavier se distingue franchement. */
.page-dictionary .table-dico tbody tr:focus-within {
    background: color-mix(in srgb, var(--teinte-chinois) 12%, var(--surface));
}

/* ---- Le bouton d'écoute et le renvoi « syn » ------------------------------

   RIEN ICI, ET C'EST VOULU. Les deux commandes sont définies une seule fois,
   dans `site.css`, section « OPTIONS du dictionnaire ». Une surcharge
   `.page-dictionary` les redessinait ici en rond bleuté et en pilule
   capitalisée : le même HTML rendait donc deux dessins différents selon que la
   page chargeait ou non cette feuille — l'entrée 新年 n'avait pas la même tête
   sur `/search/` et sur `/mandarin/dictionnaire/`. Le client a tranché pour le
   dessin sobre, et la surcharge a été retirée le 8 août 2026.

   Ne pas la remettre : ce qu'elle apportait au-delà du décor — la cible tactile
   de 44 px, l'état `aria-pressed`, le choix de `--lien` pour le contraste — a
   été repris dans la définition partagée, avec les mesures qui le justifient.
   La règle d'impression qui masquait ces commandes a suivi le même chemin,
   section « Impression » de `site.css`, où elle vaut désormais aussi pour la
   recherche générale et les haut-parleurs des dépêches.
   -------------------------------------------------------------------------- */

/* ---- Simplifié / traditionnel --------------------------------------------- */

/*
 * Les deux graphies sont dans la page ; l'encadré « Options » ne fait que
 * choisir celle qu'on montre. Quand elles diffèrent, la seconde s'affiche en
 * retrait sous la première — l'original, lui, obligeait à recharger la page.
 */
/* `flex` et non `inline-flex` : un conteneur en ligne se dimensionne sur son
   contenu, et une entrée longue — une phrase entière, un titre d'œuvre —
   débordait alors sur la colonne du pinyin au lieu de passer à la ligne. */
.dico-entree__lien {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    max-width: 100%;
}

.dico-entree__lien .chinois {
    min-width: 0;
    overflow-wrap: anywhere;
}

.chinois--traditionnel {
    font-size: 0.65em;
    color: var(--encre-faible);
}

.table-dico--traditionnel .dico-entree__lien--deux-graphies .chinois--simplifie {
    display: none;
}

.table-dico--traditionnel .dico-entree__lien--deux-graphies .chinois--traditionnel {
    font-size: 1em;
    color: inherit;
}

/* ---- Colorisation par ton -------------------------------------------------

   L'original colorait les caractères par défaut ; ici c'est un réglage, parce
   que le texte de présentation de la rubrique — que l'on ne réécrit pas —
   annonce qu'on peut « activer » la colorisation.

   Ces règles ne teintent plus que la colonne des caractères : `dictionnaire.js`
   ne pose plus de `<span class="ton-N">` dans la colonne du pinyin, qui garde
   donc le gris de `.page-dictionary .table-dico .pinyin`. Les valeurs des
   quatre variables, et la mesure qui les justifie, sont dans `site.css`.
   -------------------------------------------------------------------------- */

.table-dico--tons .ton-1 { color: var(--ton-1); }
.table-dico--tons .ton-2 { color: var(--ton-2); }
.table-dico--tons .ton-3 { color: var(--ton-3); }
.table-dico--tons .ton-4 { color: var(--ton-4); }
.table-dico--tons .ton-0 { color: var(--ton-0); }

/* Le lien du caractère ne reprend pas la main sur la couleur des tons. */
.table-dico--tons .hanzi a { color: inherit; }

/* ==========================================================================
   03. Le tableau au téléphone
   ==========================================================================

   Sous 700 px, quatre colonnes ne tiennent pas. Le portage laissait donc filer
   la traduction hors de l'écran, derrière un défilement horizontal : sur un
   dictionnaire, c'est cacher la réponse. Chaque entrée devient ici une fiche —
   caractère et pinyin sur la première ligne, traduction dessous, actions à
   droite. Rien n'est retiré, rien ne défile.
   ========================================================================== */

@media (max-width: 43.75em) {
    .page-dictionary .table-dico,
    .page-dictionary .table-dico tbody,
    .page-dictionary .table-dico tr,
    .page-dictionary .table-dico td {
        display: block;
        width: auto;
    }

    /* L'en-tête n'a plus de colonnes à nommer : chaque champ est reconnaissable
       à sa place et à sa forme. Il reste dans l'arbre d'accessibilité. */
    .page-dictionary .table-dico thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .page-dictionary .table-dico tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: baseline;
        gap: 0.15rem 0.6rem;
        padding: 0.6rem 0.75rem;
        border-bottom: 1px solid var(--bord);
    }

    .page-dictionary .table-dico tbody tr:last-child {
        border-bottom: 0;
    }

    .page-dictionary .table-dico td {
        padding: 0;
        border: 0;
    }

    /*
     * LE PINYIN PASSE À LA LIGNE, ET C'EST UNE MESURE QUI L'A DÉCIDÉ.
     *
     * Il partageait la première ligne avec le caractère, dans la colonne
     * élastique `1fr` de la grille. Tant que l'entrée est courte, cela tient.
     * Sur un mot long, la colonne du caractère mange tout : relevé à 390 px sur
     * 中共中央办公厅 —
     *
     *     caractère  212 px de large,  97 px de haut
     *     pinyin      31 px de large, 353 px de haut  →  QUATORZE lignes
     *     l'entrée entière : 483 px, soit plus de la moitié de l'écran
     *
     * `zhōng gòng zhōng yāng bàn gōng tīng` tombait donc en colonne, une syllabe
     * par ligne, à côté d'un caractère qui, lui, s'étalait. Ce n'est pas un
     * défaut de repli : c'est la grille qui donnait au pinyin ce qui restait.
     *
     * Trois rangées plutôt que deux. Le caractère garde la première avec les
     * actions, le pinyin prend la deuxième SUR TOUTE LA LARGEUR, la traduction
     * la troisième. Chacun a la ligne entière, aucun ne se replie contre l'autre.
     */
    .page-dictionary .table-dico .hanzi {
        grid-column: 1 / 3;
        grid-row: 1;
        font-size: 1.6rem;
    }

    .page-dictionary .table-dico .pinyin {
        grid-column: 1 / -1;
        grid-row: 2;
        white-space: normal;
    }

    .page-dictionary .table-dico .dico-actions {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
    }

    /* La traduction prend toute la largeur, sous les deux : c'est la réponse. */
    .page-dictionary .table-dico .traduction {
        grid-column: 1 / -1;
        grid-row: 3;
        font-size: var(--t-sm);
        color: var(--encre-douce);
    }

    .table-dico--vedette tbody tr:first-child .hanzi {
        font-size: 2.25rem;
    }

    /* Les deux graphies passent côte à côte : en pile, la ligne doublerait. */
    .dico-entree__lien {
        flex-direction: row;
        align-items: baseline;
        gap: 0.35rem;
    }
}

/* ==========================================================================
   04. Les listes HSK
   ==========================================================================

   HSK 6 tient 2 515 lignes, soit une page haute de 132 000 px. Ce qui coûtait
   cher n'était pas de la dessiner mais de la mesurer : en disposition
   automatique, le navigateur parcourt les 2 515 lignes pour décider de la
   largeur des colonnes avant d'afficher la première. `table-layout: fixed`,
   posé plus haut, supprime ce parcours — mesuré ici, le temps de mise en page
   tombe à une poignée de millisecondes.

   `content-visibility: auto` a été essayé puis retiré : il ne gagnait que 5 ms
   de plus et faisait sauter l'ascenseur, la hauteur des lignes hors écran
   n'étant qu'estimée. Sur une page de cette longueur, le remède était pire.

   ---- La contre-épreuve, et ce qui a été fait à la place --------------------

   La page a changé depuis : le balisage a été recollé (`spaceless`, voir
   `dictionary-hsk.html.twig`) et la colorisation par ton n'est plus posée d'un
   bloc au chargement mais fenêtre par fenêtre (`dictionnaire-hsk.js`). HSK 6
   tient désormais 49 920 nœuds au chargement contre 106 800. Le verdict sur
   `content-visibility` a donc été repris sur cette page allégée, avec
   `contain-intrinsic-size: auto 52px` — la hauteur réelle d'une ligne — pour
   donner à l'estimation toutes ses chances. Mesuré, en descendant à 40 000,
   120 000, 200 000 px puis en remontant :

     sans                      hauteur du document 210 172 px, constante ;
                               une ligne repérée à 119 px du haut y revient
                               exactement à 119 px ;
     avec content-visibility   hauteur 184 084 px au départ, 185 039 à
                               l'arrivée — 955 px de dérive — et la ligne
                               repérée à 113 px revient à 270 px.

   Cent cinquante pixels de saut sous les yeux du lecteur, pour une page qui
   n'en tire plus rien : la décision de 2025 tient, et elle tient mieux qu'avant.

   Ce qui a été gagné l'a été autrement, sans rien retirer au HTML servi — les
   2 515 entrées y sont entières, ces six pages étant indexées :

     HTML brut          3 862 741 → 2 286 468 o    (−41 %)
     transféré (gzip)     267 380 →   242 558 o    (−9 %)
     éléments du DOM       39 166 →    30 845      (−21 %)
     nœuds du DOM         106 800 →    49 920      (−53 %)
     blocage total (TBT)      108 →         9 ms
     la page répond dès     5 493 →     1 469 ms

   (profil mobile bridé 4x en Slow 4G, Redis vidé avant chaque mesure)
   ========================================================================== */

/* Les six niveaux se choisissent d'un coup d'œil, en haut de la liste. */
.page-dictionary--hsk .nav-lettres a,
.page-dictionary--hsk .nav-lettres span {
    font-weight: 600;
}

/* ---- Le renvoi vers la révision -------------------------------------------

   « Réviser ce vocabulaire » mène à l'atelier qui interroge la même liste. La
   forme est celle de `.lien-suite` de la page d'accueil — une pastille sobre à
   flèche — plutôt qu'un bouton plein : c'est un chemin de côté offert à qui a
   fini de lire, pas l'action principale de la page, qui reste la liste.

   Aucune couleur n'est définie ici. `--teinte` porte déjà le bleu du mandarin,
   posé par le gabarit sur `<body>` ; la pastille ne fait que s'en teinter au
   survol, comme partout ailleurs.
   -------------------------------------------------------------------------- */

.page-dictionary--hsk .hsk-reviser {
    margin: var(--r-3) 0 0;
}

.page-dictionary--hsk .hsk-reviser .lien-suite {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    /* La cible de 44 px est portée par la hauteur même de la pastille : sur une
       page qu'on parcourt au pouce, un lien de titre trop fin se rate. */
    min-height: var(--cible);
    padding: 0 var(--r-4);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--encre-douce);
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-pilule);
    transition: color var(--transition), border-color var(--transition),
        background var(--transition);
}

.page-dictionary--hsk .hsk-reviser .lien-suite::after {
    content: "\2192"; /* → */
    transition: transform var(--transition);
}

.page-dictionary--hsk .hsk-reviser .lien-suite:hover,
.page-dictionary--hsk .hsk-reviser .lien-suite:focus-visible {
    color: var(--teinte);
    background: color-mix(in srgb, var(--teinte) 8%, var(--surface));
    border-color: var(--teinte);
    text-decoration: none;
}

.page-dictionary--hsk .hsk-reviser .lien-suite:hover::after {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .page-dictionary--hsk .hsk-reviser .lien-suite::after,
    .page-dictionary--hsk .hsk-reviser .lien-suite:hover::after {
        transition: none;
        transform: none;
    }
}

/* ==========================================================================
   05. La barre de recherche
   ==========================================================================

   L'original tenait tout dans un cadre gris clair posé sous le titre : le champ,
   un pinceau, une loupe, le sens de recherche, le lien vers les 214 clés et,
   séparé d'un filet, l'encadré « OPTIONS ». On lui rend cette forme — un seul
   objet, quatre étages — plutôt qu'une rangée de contrôles éparpillés.

   Rien de voyant : un filet, une surface un ton en dessous du fond, et les
   cibles à 44 px. Ce qui doit se voir, c'est le champ.
   ========================================================================== */

.dico-barre {
    margin: 0 0 var(--r-5);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    background: var(--surface-douce);
    overflow: hidden;
}

/* Un panneau replié l'est vraiment, quelle que soit sa disposition. */
.dico-barre [hidden] {
    display: none !important;
}

.dico-barre__form {
    padding: var(--r-4);
}

.dico-barre__saisie {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--bord-fort);
    border-radius: var(--rayon-sm);
    background: var(--surface);
}

/*
 * LE CHAMP LE PLUS UTILISÉ DU SITE MÉRITAIT L'INDICATEUR DE FOCUS DU SITE.
 *
 * Il n'avait que le changement de couleur de sa bordure — de `--bord-fort` à
 * `--teinte-chinois`, soit 3,16:1 entre les deux états. Conforme de justesse, et
 * seul de son espèce : partout ailleurs (`.outil-form`, `.widget-form`,
 * `.recherche-principale`, `body select`) un champ qui prend le focus reçoit
 * `--focus-bord` ET le halo de 3 px. Le halo n'est pas un ornement, c'est ce qui
 * rend le repère visible d'un coup d'œil au lieu de demander qu'on compare une
 * bordure à celle d'à côté.
 *
 * La teinte de rubrique est GARDÉE sur la bordure — c'est le bleu du chinois,
 * il dit qu'on est dans le dictionnaire — et le halo la reprend au lieu du gris
 * commun : un seul indicateur, aux couleurs de la page. Relevé le 20 août 2026.
 */
.dico-barre__saisie:focus-within {
    border-color: var(--teinte-chinois);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teinte-chinois) 22%, transparent);
}

.dico-barre__saisie input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 3rem;
    padding: 0 var(--r-3);
    font-size: var(--t-lg);
    color: var(--encre);
    background: none;
    border: 0;
    border-radius: var(--rayon-sm) 0 0 var(--rayon-sm);
}

.dico-barre__saisie input[type="search"]:focus {
    outline: none;
}

/* Le pinceau et la loupe : deux carrés de 44 px, séparés du champ par un filet
   comme dans l'original, qui posait un `border-left` entre les trois. */
.dico-barre__pinceau,
.dico-barre__loupe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--cible);
    min-height: var(--cible);
    padding: 0;
    color: var(--encre-douce);
    background: none;
    border: 0;
    border-left: 1px solid var(--bord);
    /* Dernier enfant d'un groupe arrondi : ses coins doivent suivre, sinon son
       aplat de survol déborde en angle droit sur l'arrondi du cadre. Le rayon
       intérieur est celui du groupe moins son filet — sans cette soustraction,
       un liseré de fond reste visible dans l'angle. */
    border-radius: 0 calc(var(--rayon-sm) - 1px) calc(var(--rayon-sm) - 1px) 0;
    cursor: pointer;
}

.dico-barre__pinceau:hover,
.dico-barre__loupe:hover,
.dico-barre__pinceau[aria-expanded="true"] {
    color: var(--teinte-chinois);
    background: var(--surface-douce);
}

.dico-barre__sens {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--r-2) var(--r-3);
    margin: var(--r-3) 0 0;
}

.dico-barre__sens select {
    min-height: var(--cible);
    max-width: 100%;
    padding: 0 var(--r-2);
    font-size: var(--t-sm);
    color: var(--encre);
    background: var(--surface);
    border: 1px solid var(--bord-fort);
    border-radius: var(--rayon-sm);
}

/* Les deux notes en astérisque du menu d'origine, sorties du menu : un lecteur
   d'écran y lisait « option non sélectionnable, tiret tiret tiret ». */
.dico-barre__note {
    margin: 0;
    font-size: var(--t-xs);
    color: var(--encre-faible);
}

/* ---- La zone de tracé ----------------------------------------------------- */

/*
 * `#handwriting`, `.drawingBoard` et `.charPicker` sont habillés par site.css.
 * Seul le cadre qui les accueille est réglé ici.
 */
.dico-ecriture {
    padding: var(--r-4);
    border-top: 1px solid var(--bord);
    background: var(--surface);
}

.dico-ecriture__note {
    margin: var(--r-3) 0 0;
    font-size: var(--t-xs);
    color: var(--encre-faible);
}

/* ---- Le tableau des 214 clés ---------------------------------------------- */

.dico-barre__lien-cles {
    margin: 0;
    padding: 0 var(--r-4) var(--r-4);
}

.dico-barre__lien-cles button {
    padding: 0.4rem 0;
    font-size: var(--t-sm);
    color: var(--encre-douce);
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

.dico-barre__lien-cles button:hover,
.dico-barre__lien-cles button[aria-expanded="true"] {
    color: var(--teinte-chinois);
}

.dico-cles {
    padding: var(--r-4);
    border-top: 1px solid var(--bord);
    background: var(--surface);
}

.dico-cles__grille,
.dico-cles__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

/* Le nombre de traits ouvre chaque groupe : c'est ainsi qu'on retrouve une clé
   dont on ignore la prononciation. L'original calculait ces groupes (`tra`) sans
   jamais les montrer. Le libellé est posé par CSS parce qu'il est décoratif :
   l'information est déjà dans l'infobulle de chaque clé, que lit un lecteur
   d'écran. */
.dico-cles__traits {
    display: block;
    width: 100%;
    margin: var(--r-3) 0 0.15rem;
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--encre-faible);
}

.dico-cles__traits::after {
    content: " traits";
    font-weight: 400;
}

.dico-cles__traits:first-child {
    margin-top: 0;
}

/* Le premier groupe est celui des clés d'un seul trait. */
.dico-cles__traits:first-child::after {
    content: " trait";
}

.dico-cles__cle,
.dico-cles__caractere {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cible);
    height: var(--cible);
    font-family: var(--dico-police-cjk);
    font-size: var(--t-lg);
    line-height: 1;
    color: var(--encre);
    background: var(--surface-douce);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    cursor: pointer;
}

.dico-cles__cle:hover,
.dico-cles__caractere:hover {
    color: var(--teinte-chinois);
    border-color: var(--teinte-chinois);
}

/* Une clé peut compter deux mille caractères : la liste défile chez elle plutôt
   que d'allonger la page de vingt écrans. */
.dico-cles__liste {
    max-height: 40vh;
    overflow-y: auto;
    padding: 2px;
}

.dico-cles__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--r-3);
    margin: 0 0 var(--r-3);
    font-size: var(--t-sm);
}

.dico-cles__entete button {
    min-height: var(--cible);
    padding: 0 var(--r-3);
    font-size: var(--t-sm);
    color: var(--encre-douce);
    background: var(--surface-douce);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    cursor: pointer;
}

/* ==========================================================================
   05 bis. L'encadré « OPTIONS »
   ==========================================================================

   L'original posait un lien « OPTIONS → » en petit gris, aligné à droite sous le
   champ, et dépliait deux lignes de boutons radio : CARACTÈRES et PHONÉTIQUE.
   La forme est la même ici ; ce qui change est que les réglages ne rechargent
   plus la page.
   ========================================================================== */

.dico-barre__pied {
    border-top: 1px solid var(--bord);
    background: var(--surface);
}

.dico-options__bascule {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    min-height: var(--cible);
    padding: 0.4rem var(--r-4);
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--encre-douce);
    background: none;
    border: 0;
    cursor: pointer;
}

.dico-options__bascule:hover,
.dico-options__bascule[aria-expanded="true"] {
    color: var(--encre);
    background: var(--surface-appuyee);
}

.dico-options {
    border-top: 1px solid var(--bord);
}

.dico-options__corps {
    display: flex;
    flex-direction: column;
    /* Explicite : une règle de site.css centre les éléments des colonnes flex,
       ce qui posait les deux groupes de réglages au milieu de la barre au lieu
       de les aligner sur le champ de recherche. */
    align-items: stretch;
    gap: var(--r-3);
    padding: var(--r-4);
    background: var(--surface);
}

/* Deux vrais groupes de champs : un lecteur d'écran annonce « CARACTÈRES,
   groupe » avant de lire les trois choix, au lieu de six contrôles orphelins.

   Le `fieldset` reste en flux normal — un `display:flex` y ferait de la
   `legend` un élément de la rangée, qui viendrait se ranger au milieu des
   boutons au lieu de les titrer. */
.dico-options__groupe {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}

.dico-options__groupe legend {
    display: block;
    margin: 0 0 0.35rem;
    padding: 0;
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--encre);
}

/* Les réglages sont des interrupteurs, pas des cases perdues dans du texte : la
   cible fait 44 px de haut et l'état actif se voit. */
.dico-options__corps label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--cible);
    margin: 0 0.5rem 0.4rem 0;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    font-size: var(--t-sm);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-pilule, 999px);
    background: var(--surface-douce);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.dico-options__corps label:hover {
    border-color: var(--teinte-chinois);
}

.dico-options__corps label:has(input:checked) {
    color: var(--teinte-chinois);
    font-weight: 600;
    border-color: var(--teinte-chinois);
    background: color-mix(in srgb, var(--teinte-chinois) 10%, var(--surface));
}

.dico-options__corps input[type="checkbox"],
.dico-options__corps input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--teinte-chinois);
    cursor: pointer;
}

.dico-options__envoi {
    margin: 0;
}

.dico-options__envoi button {
    min-height: var(--cible);
    padding: 0 var(--r-4);
    font-size: var(--t-sm);
    color: var(--surface);
    background: var(--teinte-chinois);
    border: 0;
    border-radius: var(--rayon-sm);
    cursor: pointer;
}

/* La légende des tons sert de témoin : elle porte les couleurs réelles. */
.dico-options .legende-tons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-xs);
}

/* Les couleurs sont sur les pastilles (`site.css`), pas sur les mots : à 13 px,
   « 2ᵉ ton » écrit dans l'orange d'origine ne tient que 2,3:1. */
.dico-options .legende-tons li {
    display: inline;
    font-weight: 600;
}

/* Tant que la colorisation est éteinte, la légende annonce une couleur qui ne
   s'applique nulle part : elle s'efface pour ne pas mentir. */
.dico-options:not(.dico-options--tons) .legende-tons {
    opacity: 0.45;
}

/* ==========================================================================
   06. La fiche du caractère
   ==========================================================================

   Le programme d'origine consacrait un panneau entier au caractère cherché :
   une grande vignette calligraphiée, la forme traditionnelle dessous, puis
   quatre petits tableaux titrés — Radical, Composition, Méthodes d'entrée,
   HSK. Le portage avait mis les dix données à plat, sur une grille où le code
   Big5 pesait autant que le nombre de traits.

   On lui rend sa hiérarchie : le caractère, puis ce qui sert à l'apprendre,
   puis ce qui sert à le saisir.
   ========================================================================== */

.fiche-caractere {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 var(--r-5);
    align-items: start;
    padding: var(--r-5);
    margin: 0 0 var(--r-5);
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-1);
}

/* La vignette : le caractère aussi grand que le panneau le permet, sur un fond
   quadrillé qui rappelle la grille d'écriture des cahiers d'apprentissage. */
.fiche-caractere__vignette {
    /* La vignette tient la hauteur des deux rangées de données : sans cela, un
       vide s'ouvrait sous les tuiles, à côté du caractère. */
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 8.5rem;
    padding: var(--r-4);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    background-color: var(--surface-douce);
    background-image:
        linear-gradient(var(--bord) 1px, transparent 1px),
        linear-gradient(90deg, var(--bord) 1px, transparent 1px);
    background-size: 50% 50%;
    background-position: center;
    background-repeat: repeat;
}

.fiche-caractere__hanzi {
    font-family: var(--dico-police-cjk);
    font-size: clamp(4rem, 3rem + 4vw, 6rem);
    line-height: 1;
    color: var(--encre);
}

.fiche-caractere__pinyin {
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--lien);
    letter-spacing: 0.02em;
}

/* ---- Les données ---------------------------------------------------------- */

.fiche-caractere__donnees {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: var(--r-3);
    margin: 0;
}

/* Ce qui sert à comprendre le caractère : des tuiles franches. */
.fiche-caractere__donnees > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.7rem;
    background: var(--surface-douce);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
}

.fiche-caractere__donnees dt {
    font-size: var(--t-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--encre-faible);
}

.fiche-caractere__donnees dd {
    margin: 0;
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--encre);
    /* Chiffres à chasse fixe : « 12 traits » et « HSK 4 » sont côte à côte dans
       des tuiles de même largeur, et des chiffres proportionnels les faisaient
       danser d'un caractère à l'autre. Cette déclaration vivait dans `site.css`,
       seule survivante d'un doublon complet de la fiche que ce fichier
       recouvrait par ailleurs entièrement — elle est rapatriée ici avec lui. */
    font-variant-numeric: tabular-nums;
}

.fiche-caractere__donnees dd .chinois {
    font-size: 1.6rem;
    font-weight: 400;
    vertical-align: -0.1em;
}

.fiche-caractere__donnees a {
    color: var(--lien);
}

/*
 * Les codes de saisie — Cangjie, Sijiao, Wubi, GB, Big5, Unicode — n'intéressent
 * qu'au moment où on les cherche. Ils restent lisibles, en chiffres tabulaires,
 * mais ne disputent plus la place au radical et au nombre de traits.
 */
.fiche-caractere__codes {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.5rem;
    margin: var(--r-4) 0 0;
    padding-top: var(--r-3);
    border-top: 1px solid var(--bord);
}

.fiche-caractere__codes > div {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.fiche-caractere__codes dt {
    font-size: var(--t-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--encre-faible);
}

.fiche-caractere__codes dd {
    margin: 0;
    font-family: var(--police-mono);
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
    color: var(--encre-douce);
}

.fiche-caractere__codes dd .chinois {
    font-family: var(--dico-police-cjk);
    font-size: var(--t-md);
}

.fiche-caractere__note {
    font-size: var(--t-sm);
    font-weight: 400;
    color: var(--encre-faible);
}

/* ---- Les renvois ---------------------------------------------------------- */

.fiche-caractere__liens {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    gap: var(--r-2);
    margin: var(--r-4) 0 0;
    padding-top: var(--r-4);
    border-top: 1px solid var(--bord);
}

.fiche-caractere__liens a {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible);
    padding: 0 var(--r-4);
    font-size: var(--t-sm);
    font-weight: 600;
    /* Voir le bouton d'écoute : le bleu de rubrique sur son propre voile reste
       sous 4,5:1 en thème clair. */
    color: var(--lien);
    background: color-mix(in srgb, var(--teinte-chinois) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--teinte-chinois) 35%, transparent);
    border-radius: var(--rayon-sm);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.fiche-caractere__liens a:hover,
.fiche-caractere__liens a:focus-visible {
    color: #fff;
    background: var(--teinte-chinois);
    border-color: var(--teinte-chinois);
    text-decoration: none;
}

@media (max-width: 43.75em) {
    /* Au téléphone la fiche s'empile : les placements explicites de la grille à
       deux colonnes sont rendus à l'ordre naturel du document. */
    .fiche-caractere {
        grid-template-columns: 1fr;
        gap: var(--r-4);
        padding: var(--r-4);
    }

    .fiche-caractere__vignette,
    .fiche-caractere__donnees,
    .fiche-caractere__codes,
    .fiche-caractere__liens {
        grid-column: 1;
        grid-row: auto;
    }

    .fiche-caractere__vignette {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--r-4);
        min-width: 0;
    }

    .fiche-caractere__hanzi {
        font-size: 3.5rem;
    }

    .fiche-caractere__donnees {
        grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
    }

    .fiche-caractere__liens a {
        flex: 1 1 8rem;
        justify-content: center;
    }
}

/* ==========================================================================
   07. L'accueil du dictionnaire
   ========================================================================== */

/* Le champ de recherche est la raison d'être de la page : il se voit. */
.page-dictionnaire .recherche-principale,
.page-dictionary .recherche-principale {
    max-width: 44rem;
}

.page-dictionnaire .recherche-principale input {
    font-size: var(--t-xl);
    min-height: 3.5rem;
}

.page-dictionnaire .recherche-principale button {
    min-height: 3.5rem;
}

/* ---- Reconnaissance manuscrite -------------------------------------------- */

/*
 * Le cadre de tracé (`#handwriting`, `.ecriture`, `.charPicker`) est entièrement
 * habillé par site.css, et bien : colonne de 246 px, commandes posées au bas du
 * canevas, liste de candidats déroulante. Rien n'est redéfini ici — une première
 * version de cette feuille le refaisait et cassait la mise en colonnes.
 *
 * `.ecriture__figure` habillait la légende de la figure ; aucun gabarit, aucun
 * script et aucun article en base ne pose cette classe, et elle est partie avec
 * les huit autres règles sans poseur.
 */

/* ---- Le texte de présentation --------------------------------------------- */

/* La mesure de lecture est déjà tenue par la grille de `.article__texte` dans
   site.css : la redéclarer ici décalait tout le texte vers la droite. */

/* Le compteur d'entrées, en tête de la présentation : la phrase d'origine, mais
   le nombre — lu en base — posé en hero, gros, bleu, centré, sur sa propre
   ligne. `display: block` sur le nombre force le saut de ligne avant et après ;
   `text-align: center` centre les trois lignes. `tabular-nums` fige la largeur
   des chiffres pour que le nombre ne « respire » pas d'un rendu à l'autre. */
.dico-compteur {
    text-align: center;
    margin: var(--r-4) 0 var(--r-6);
    font-size: var(--t-lg);
    line-height: 1.5;
}

.dico-compteur__nombre {
    display: block;
    margin: 0.1em 0;
    /* Deux fois plus petit qu'au premier jet : à 4,5 rem, le nombre occupait
       le tiers de la hauteur d'un écran de téléphone et écrasait la phrase qui
       l'entoure — l'éditeur l'a dit en le voyant en ligne. Il reste mis en
       avant (bloc, gras, teinte du chinois), sans faire de l'ombre au reste. */
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
    font-weight: 700;
    line-height: 1;
    color: var(--teinte-chinois);
    font-variant-numeric: tabular-nums;
}

.dico-conseils li {
    margin-bottom: var(--r-2);
    line-height: 1.55;
}

/* Les abréviations en deux colonnes serrées : c'est une table de consultation,
   pas un texte suivi. */
/* Les abréviations sur DEUX colonnes : quatre pistes de grille — terme,
   définition, terme, définition — et un AUTO-PLACEMENT. Les vingt et un couples
   `<dt>/<dd>` se rangent dans l'ordre, deux paires par ligne, ce qui divise la
   hauteur de la liste par deux. Sous 34 rem (téléphone), on replie à une seule
   paire pour ne pas serrer les colonnes. D'où le retrait des `grid-column` fixes
   sur `dt`/`dd` : c'est l'auto-placement qui répartit, une colonne imposée
   empêcherait la seconde paire. */
.dico-abreviations {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    gap: 0.3rem var(--r-5);
    margin: 0 0 var(--r-5);
    max-width: 52rem;
}

@media (max-width: 34rem) {
    .dico-abreviations {
        grid-template-columns: max-content minmax(0, 1fr);
    }
}

.dico-abreviations dt {
    font-weight: 700;
    color: var(--encre);
}

.dico-abreviations dd {
    margin: 0;
    color: var(--encre-douce);
}

.dico-listes {
    line-height: 2.2;
}

.dico-listes a {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0 0.15rem;
}

.dico-trop {
    padding: var(--r-4);
    margin: var(--r-4) 0 0;
    font-size: var(--t-sm);
    color: var(--encre-douce);
    background: var(--surface-douce);
    border: 1px dashed var(--bord-fort);
    border-radius: var(--rayon-sm);
}

/* ==========================================================================
   08. Titres de section des résultats
   ========================================================================== */

/*
 * « Résultats précis » puis « Résultats approximatifs » : la distinction est ce
 * qui fait la valeur du classement du dictionnaire. Elle doit se voir sans
 * qu'on la cherche.
 */
.page-dictionary .section-titre--sobre h2 {
    display: flex;
    align-items: center;
    gap: var(--r-3);
    margin: var(--r-5) 0 var(--r-3);
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--encre);
}

.page-dictionary .section-titre--sobre h2::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--bord);
}

/* ==========================================================================
   09. Impression
   ========================================================================== */

@media print {
    /* `.dico-son` et `.dico-actions` sont partis avec leur composant, dans le
       bloc « Impression » de `site.css` : la règle y couvre en plus la recherche
       générale et les dépêches, qui ne chargent pas cette feuille et
       imprimaient donc des boutons inertes. Ne restent ici que les deux blocs
       propres au dictionnaire. */
    .dico-barre,
    .ecriture { display: none !important; }

    .page-dictionary .table-dico thead th { position: static; }
}

/* ==========================================================================
   « Pour aller plus loin » — l'approfondissement de la fiche du mot vedette.

   Décomposition, phrases d'exemple, grammaire et guide, sous les résultats.
   Reprend les mêmes jetons que la fiche caractère (surface, bord, rayon) pour
   que les deux encadrés se lisent comme une même page.
   ========================================================================== */
.dico-plus {
    margin: var(--r-6, 2rem) 0 var(--r-5);
    padding: var(--r-5);
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-1);
}

.dico-plus__titre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 var(--r-4);
    padding-bottom: var(--r-3);
    font-size: var(--t-lg);
    border-bottom: 1px solid var(--bord);
}

.dico-plus__titre .chinois {
    font-family: var(--dico-police-cjk);
    color: var(--teinte-chinois, var(--teinte));
}

/* Chaque bloc thématique est séparé du suivant par une réglure discrète. */
.dico-plus__bloc + .dico-plus__bloc {
    margin-top: var(--r-4);
    padding-top: var(--r-4);
    border-top: 1px solid var(--bord);
}

.dico-plus__sous-titre {
    margin: 0 0 var(--r-3);
    font-size: var(--t-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--encre-douce);
}

/* ---- Décomposition -------------------------------------------------------- */
.dico-plus__composants {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
    gap: var(--r-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dico-plus__composant {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    background: var(--surface-douce);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
}

.dico-plus__caractere {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    text-decoration: none;
    white-space: nowrap;
}

.dico-plus__caractere .chinois {
    font-family: var(--dico-police-cjk);
    font-size: var(--t-lg);
    color: var(--encre);
}

.dico-plus__caractere:hover .chinois,
.dico-plus__caractere:focus-visible .chinois { color: var(--teinte); }

.dico-plus__py {
    font-weight: 600;
    color: var(--lien);
}

.dico-plus__sens {
    font-size: var(--t-sm);
    color: var(--encre-douce);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Phrases d'exemple ---------------------------------------------------- */
.dico-plus__exemples {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--r-3);
}

.dico-plus__exemple {
    padding-left: var(--r-3);
    border-left: 3px solid color-mix(in srgb, var(--teinte-chinois, var(--teinte)) 40%, var(--bord));
}

.dico-plus__zh {
    margin: 0;
    font-family: var(--dico-police-cjk);
    font-size: var(--t-md);
    line-height: 1.6;
    color: var(--encre);
}

.dico-plus__trad {
    margin: 0.15rem 0 0;
    font-size: var(--t-sm);
    color: var(--encre-douce);
}

.dico-plus__tout {
    margin: var(--r-3) 0 0;
    font-size: var(--t-sm);
}

/* ---- Listes de liens (grammaire, guide) ----------------------------------- */
.dico-plus__liens {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.35rem;
}

.dico-plus__liens li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dico-plus__niveau {
    padding: 0 0.45rem;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--encre-douce);
    background: var(--surface-douce);
    border: 1px solid var(--bord-fort);
    border-radius: var(--rayon-pilule);
}

/* Le bouton d'écoute du mot vedette reprend le haut-parleur du tableau : même
   classe `.dico-son`, mêmes règles ; rien à styler de plus ici. */

/* ==========================================================================
   La fiche dédiée d'un mot — `?mot=<hanzi>`.

   Reprend les jetons de la fiche caractère (vignette quadrillée, tuiles) et les
   sections `.dico-plus__*` de l'approfondissement de la recherche : la fiche du
   mot est la même matière, en pleine page.
   ========================================================================== */
.fiche-mot {
    max-width: 62rem;
    margin: 0 auto;
}

.fiche-mot__entete {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 var(--r-5);
    align-items: start;
    padding: var(--r-5);
    margin: 0 0 var(--r-5);
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-1);
}

/* La vignette, comme celle du caractère isolé : le mot sur un fond quadrillé. */
.fiche-mot__vignette {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 8.5rem;
    padding: var(--r-4);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    background-color: var(--surface-douce);
    /* Pas de grille de fond : les deux `linear-gradient` traçaient une croix au
       centre de la carte, qui coupait le caractère en son milieu — le client la
       trouvait « étrange ». Le fond reste un aplat doux. */
}

.fiche-mot__hanzi {
    font-family: var(--dico-police-cjk);
    font-size: clamp(2.6rem, 2rem + 3.5vw, 4rem);
    line-height: 1.05;
    text-align: center;
    color: var(--encre);
}

.fiche-mot__trad {
    font-family: var(--dico-police-cjk);
    font-size: var(--t-md);
    color: var(--encre-faible);
}

.fiche-mot__titre h1 {
    margin: 0 0 var(--r-3);
    font-size: var(--t-xl, 1.5rem);
}

.fiche-mot__titre h1 .chinois {
    font-family: var(--dico-police-cjk);
    color: var(--teinte-chinois, var(--teinte));
}

.fiche-mot__titre h1 small {
    font-size: var(--t-md);
    font-weight: 400;
    color: var(--encre-douce);
}

/* Les lectures : une par ligne, pinyin + niveau au-dessus, sens en dessous. */
.fiche-mot__lectures {
    margin: 0;
}

.fiche-mot__lecture {
    padding: var(--r-3) 0;
    border-top: 1px solid var(--bord);
}

.fiche-mot__lecture:first-child {
    border-top: 0;
    padding-top: 0;
}

.fiche-mot__pinyin {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.15rem;
}

.fiche-mot__pinyin .dico-pinyin {
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--lien);
}

.fiche-mot__hsk {
    padding: 0 0.45rem;
    font-size: var(--t-xs);
    font-weight: 600;
    text-decoration: none;
    color: var(--encre-douce);
    background: var(--surface-douce);
    border: 1px solid var(--bord-fort);
    border-radius: var(--rayon-pilule);
}

.fiche-mot__def {
    margin: 0;
    color: var(--encre);
}

.fiche-mot__srs {
    margin: var(--r-4) 0 0;
}

/* L'approfondissement en pleine page : le cadre `.dico-plus` sans sa marge
   supérieure de séparation (il suit directement l'en-tête). */
.dico-plus--fiche {
    margin-top: 0;
}

/* Les tracés côte à côte, chacun dans son encadré d'ordre des traits. */
.fiche-mot__traces {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r-4);
}

.fiche-mot__traces > * {
    flex: 0 1 auto;
}

/* Pleine largeur, aligné à gauche comme le reste de la fiche. Sans `max-width:
   none` — et la spécificité qui bat la règle de prose `.contenu p` —, ce
   paragraphe isolé héritait de la largeur de lecture (~600 px) et de son centrage
   `margin: auto` : le lien se retrouvait décalé au milieu, détaché du contenu.
   C'était le « problème de mise en forme » signalé. */
.fiche-mot .fiche-mot__retour {
    max-width: none;
    margin: var(--r-5) 0 0;
    font-size: var(--t-sm);
}

@media (max-width: 560px) {
    .fiche-mot__entete {
        grid-template-columns: 1fr;
        gap: var(--r-4) 0;
        justify-items: center;
        text-align: center;
    }

    .fiche-mot__pinyin { justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Les mots du jour — la dizaine de mots saillants de l'actualité, posés chaque
   nuit par l'agent `dico-mots-du-jour`, en vignettes cliquables menant à la recherche
   du dictionnaire. Sobre à dessein : des pastilles de mots qui prennent la teinte
   du chinois au survol, sans concurrencer la longue présentation qui les précède.
   ------------------------------------------------------------------------- */
.mots-du-jour {
    margin: var(--r-5) 0 0;
}

.mots-du-jour__grille {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mots-du-jour__grille a {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible);
    padding: 0 var(--r-4);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-pilule);
    background: var(--surface-douce);
    color: var(--encre);
    font-size: var(--t-sm);
    line-height: 1.2;
    text-decoration: none;
    transition: var(--transition);
}

.mots-du-jour__grille a:hover,
.mots-du-jour__grille a:focus-visible {
    border-color: var(--teinte-chinois);
    color: var(--teinte-chinois);
}

/*
 * « Entrées contenant … », demandé au clic.
 *
 * Le seul des trois blocs de la recherche chinoise qui balaye les 342 751
 * lignes du dictionnaire — 97,3 % du coût SQL d'une recherche. Il ne part plus
 * avec la page : voir templates/pages/dictionary-search.html.twig et
 * DictionaryRepository::searchChinese().
 *
 * LA MARGE EST SUR LE BOUTON, PAS SUR SON CONTENEUR, et c'est ce qui règle le
 * cas sans JavaScript : le bouton est rendu `hidden` et n'est révélé que par le
 * script qui sait y répondre. Posée sur le conteneur, elle laisserait à qui n'a
 * pas de script quatre rem de blanc sous les résultats, sous une commande
 * invisible. Un élément en `display: none` n'a pas de marge ; le conteneur vide
 * ne prend donc aucune place.
 *
 * Une fois la liste chargée, elle apporte ses propres espacements — l'intertitre
 * `.section-titre` et le tableau `.table-dico` — et le conteneur n'a plus rien à
 * régler.
 */
.dico-approchants__bouton {
    margin: var(--r-6) 0;
}