/* ============================================================
   domains/mode/css/lexique.css — LOT D : lexique illustré (/lexique/…).
   Un seul fichier CSS pour toute la rubrique (chargé par header.php quand
   $mi_ctx['css'] === 'lexique'). Il ne redéfinit AUCUNE classe du socle (lot A) :
   il n'ajoute que des modificateurs préfixés .lex-*.

   Thème « encre & ivoire » : les variables du socle sont utilisées quand elles
   existent, avec un repli identique à la charte (§6 de la SPEC). Le laiton n'est
   employé QUE pour des filets et des aplats ; pour du TEXTE on prend sa version
   assombrie (#8A5F1F = 5,2:1 sur ivoire, le laiton nominal n'atteint que 3,7:1).
   Mobile d'abord, aucun débordement horizontal à 360 px.
   ============================================================ */

.lex-fams,
.lex-terms,
.lex-conf-grid,
.lex-az-list,
.lex-letters,
.lex-sibs,
.lex-othfams,
.lex-reperes { list-style: none; margin: 0; padding: 0; }

/* ---------- Schémas SVG (le cœur de la rubrique) ---------- */
.lex-schema {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
    color: var(--mi-ink, #17161A);
    overflow: visible;
}
.lex-schema.is-mini { max-width: 64px; }
.lex-schema.is-card { max-width: 96px; }

/* ---------- Grille des familles (hub) ---------- */
.lex-fams,
.lex-terms,
.lex-conf-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}
@media (min-width: 560px) {
    .lex-fams, .lex-terms, .lex-conf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .lex-fams  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lex-terms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lex-conf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lex-fam,
.lex-term {
    display: block;
    padding: 16px 16px 18px;
    border: 1px solid var(--mi-rule, #DCD5C9);
    border-radius: 10px;
    background: var(--mi-surface, #FFFDF9);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.lex-fam:hover,
.lex-term:hover { border-color: var(--mi-brass, #A9772F); }
.lex-fam:focus-visible,
.lex-term:focus-visible,
.lex-conf-link:focus-visible,
.lex-letters a:focus-visible,
.lex-nav a:focus-visible {
    outline: 3px solid var(--mi-indigo, #2E3550);
    outline-offset: 2px;
    border-radius: 6px;
}
.lex-fam-sch,
.lex-term-sch,
.lex-conf-sch { display: block; margin-bottom: 10px; }
.lex-fam .card-title,
.lex-term .card-title,
.lex-conf-card .card-title {
    display: block;
    font-weight: 600;
    font-size: 1.06rem;
    line-height: 1.3;
    text-align: center;
}
.lex-fam .card-meta,
.lex-term .card-meta {
    display: block;
    margin-top: 2px;
    text-align: center;
    font-size: .82rem;
    color: var(--mi-brass-text, #8A5F1F);
}
.lex-fam-txt,
.lex-term-def {
    display: block;
    margin-top: 8px;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--mi-ink-soft, #44424A);
}

/* ---------- Recherche + index alphabétique ---------- */
.lex-search { margin: 0 0 14px; }
.lex-search .field { display: block; max-width: 460px; }
.lex-search label { display: block; font-weight: 600; margin-bottom: 4px; }
.lex-search input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font: inherit;
    color: var(--mi-ink, #17161A);
    background: var(--mi-surface, #FFFDF9);
    border: 1px solid var(--mi-rule-strong, #BDB3A3);
    border-radius: 8px;
}
.lex-search input[type="search"]:focus-visible {
    outline: 3px solid var(--mi-indigo, #2E3550);
    outline-offset: 1px;
}
.lex-count { margin: 6px 0 0; font-size: .9rem; color: var(--mi-ink-soft, #44424A); min-height: 1.2em; }

.lex-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}
.lex-letters a {
    display: inline-block;
    min-width: 2em;
    padding: 5px 6px;
    text-align: center;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    color: var(--mi-indigo, #2E3550);
    border: 1px solid var(--mi-rule, #DCD5C9);
    border-radius: 6px;
}
.lex-letters a:hover { border-color: var(--mi-indigo, #2E3550); }

.lex-az-block { margin: 0 0 18px; }
.lex-az-h {
    margin: 0 0 8px;
    padding-bottom: 4px;
    font-size: 1.25rem;
    border-bottom: 2px solid var(--mi-brass, #A9772F);
}
.lex-az-list {
    display: grid;
    gap: 6px 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 620px) { .lex-az-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .lex-az-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lex-az-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 2px 0;
}
.lex-az-item .pill {
    font-size: .74rem;
    line-height: 1.5;
    padding: 1px 7px;
    border-radius: 999px;
    color: var(--mi-ink-soft, #44424A);
    background: var(--mi-wash, #F0EADF);
}
.lex-empty { margin: 8px 0 0; font-style: italic; }

/* ---------- Tête d'une page de famille (mi_page_head, variante ph-lex-fam) ---------- */
.lex-fam-vignette { max-width: 132px; margin: 14px 0 0; opacity: .92; }
@media (min-width: 760px) {
    .ph-lex-fam .wrap { position: relative; padding-right: 180px; }
    .lex-fam-vignette { position: absolute; top: 0; right: 0; margin: 0; }
}

.lex-reperes { display: grid; gap: 10px; }
.lex-reperes li {
    padding: 12px 14px;
    border-left: 3px solid var(--mi-brass, #A9772F);
    background: var(--mi-wash, #F0EADF);
    border-radius: 0 8px 8px 0;
}
.lex-reperes strong { display: block; }

.lex-othfams,
.lex-sibs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}
.lex-othfams li,
.lex-sibs li { margin: 0; }
.lex-sub { font-size: 1rem; margin: 14px 0 6px; }

/* ---------- Fiche de terme : le schéma à côté du texte ---------- */
.lex-aka { margin: 2px 0 0; font-size: .95rem; color: var(--mi-ink-soft, #44424A); }
.lex-def { margin-top: 10px; }
.lex-layout { display: block; }
@media (min-width: 880px) {
    .lex-layout {
        display: grid;
        gap: 32px;
        grid-template-columns: 300px minmax(0, 1fr);
        align-items: start;
    }
    .lex-layout .lex-figure { position: sticky; top: 16px; }
}
.lex-figure {
    margin: 18px 0 0;
    padding: 14px;
    border: 1px solid var(--mi-rule, #DCD5C9);
    border-radius: 12px;
    background: var(--mi-surface, #FFFDF9);
}
.lex-figure figcaption {
    margin-top: 10px;
    font-size: .86rem;
    line-height: 1.45;
    text-align: center;
    color: var(--mi-ink-soft, #44424A);
}
@media (min-width: 880px) {
    .lex-layout .lex-figure { margin: 0; }
}

.lex-body h2:first-child { margin-top: 0; }
.lex-body h2 { margin-top: 1.6em; }
.lex-body p { max-width: 68ch; }

/* ---------- « Ne pas confondre avec » ---------- */
.lex-conf-card {
    padding: 14px;
    border: 1px solid var(--mi-rule, #DCD5C9);
    border-radius: 10px;
    background: var(--mi-surface, #FFFDF9);
}
.lex-conf-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.lex-conf-link:hover .card-title { text-decoration: underline; }
.lex-conf-txt {
    margin: 10px 0 0;
    font-size: .94rem;
    line-height: 1.55;
}

/* ---------- Navigation terme précédent / suivant ---------- */
.lex-nav {
    display: grid;
    gap: 10px;
    margin: 26px 0 0;
    grid-template-columns: 1fr;
}
@media (min-width: 620px) { .lex-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lex-nav a {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--mi-rule, #DCD5C9);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    background: var(--mi-surface, #FFFDF9);
}
.lex-nav a:hover { border-color: var(--mi-brass, #A9772F); }
.lex-nav a span {
    display: block;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mi-brass-text, #8A5F1F);
}
.lex-nav a strong { display: block; margin-top: 2px; }
.lex-nav-next { text-align: right; }

/* ---------- Préférences d'affichage ---------- */
@media (prefers-reduced-motion: reduce) {
    .lex-fam, .lex-term { transition: none; }
}
@media print {
    .lex-search, .lex-letters, .lex-nav { display: none; }
    .lex-fam, .lex-term, .lex-conf-card, .lex-figure { break-inside: avoid; }
}