/* ============================================================
   domains/mode/css/entretien.css — rubrique ENTRETIEN (lot C).
   Chargé par le header quand $mi_ctx['css'] === 'entretien'.

   Ne style QUE les classes propres au lot (`ent-*`, `sym-*`) et quelques ajustements
   LOCAUX à l'intérieur de ses blocs : les classes du socle (.card, .tbl, .callout…)
   appartiennent au lot A, on ne les redéfinit pas globalement.

   Garde-fous : contraste AA (le laiton du socle ne passe pas 4,5:1 en texte sur ivoire,
   d'où --ent-accent plus sombre), :focus-visible sur tout élément interactif,
   prefers-reduced-motion respecté, aucun débordement horizontal à 360 px, impression propre.
   ============================================================ */

.ent-card,
.ent-cas,
.sym-item,
.ent-pilier {
    /* Variables locales : si le socle définit les siennes, elles gagnent (var() en 1er). */
    --ent-ink:    var(--mi-encre, #17161A);
    --ent-paper:  var(--mi-ivoire, #FAF7F2);
    --ent-line:   var(--mi-filet, #DED7CB);
    --ent-accent: var(--mi-laiton-txt, #7F5611);
    --ent-cold:   var(--mi-indigo, #2E3550);
}

/* ---------- Cartes de la rubrique ---------- */
.ent-card {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .85rem .95rem;
    text-decoration: none;
    color: var(--mi-encre, #17161A);
    border: 1px solid var(--mi-filet, #DED7CB);
    border-radius: 10px;
    background: #fff;
}
.ent-card .card-title { font-weight: 600; line-height: 1.25; }
.ent-card .card-meta  { color: #4A4742; font-size: .88rem; }
.ent-card:hover { border-color: var(--mi-indigo, #2E3550); }
.ent-card:focus-visible,
.ent-pilier:focus-visible,
.sym-filter input:focus-visible {
    outline: 3px solid var(--mi-indigo, #2E3550);
    outline-offset: 2px;
}

/* ---------- Les 4 cas de matière d'une fiche tache ---------- */
.ent-cas { padding: .9rem 1rem; }
.ent-cas .card-title { margin: 0 0 .35rem; font-size: 1.02rem; }
.ent-cas p:last-child { margin-bottom: 0; }

/* ---------- Encadrés de sécurité et de rappel ---------- */
.ent-javel strong { color: #7A1E12; }
.ent-reflexes .ent-steps-short li { margin-bottom: .2rem; }

/* ---------- Carte pilier « symboles » du hub /entretien/ ---------- */
.ent-pilier {
    display: block;
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: var(--mi-encre, #17161A);
    border: 2px solid var(--mi-indigo, #2E3550);
    border-radius: 12px;
    background: #fff;
}
.ent-pilier-syms {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: .6rem;
    color: var(--mi-indigo, #2E3550);
}
.ent-pilier .card-title { display: block; font-size: 1.1rem; font-weight: 700; margin-bottom: .3rem; }
.ent-pilier .card-meta  { display: block; color: #4A4742; }

/* ---------- Pastilles de symboles dans une fiche matière ---------- */
.ent-sym-chips { margin: .9rem 0 0; }
.sym-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 0 0 .5rem;
    padding: 0;
    list-style: none;
}
.sym-chip {
    display: flex;
    align-items: center;
    gap: .45rem;
    max-width: 100%;
    padding: .35rem .6rem .35rem .4rem;
    border: 1px solid var(--mi-filet, #DED7CB);
    border-radius: 999px;
    background: #fff;
    font-size: .86rem;
    line-height: 1.2;
}
.sym-chip span { min-width: 0; }

/* ---------- Page pilier : grille des symboles ---------- */
.sym-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}
.sym-item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: .85rem .9rem;
    border: 1px solid var(--mi-filet, #DED7CB);
    border-radius: 10px;
    background: #fff;
}
.sym-draw { flex: 0 0 auto; color: var(--mi-encre, #17161A); }
.sym-txt  { min-width: 0; }
.sym-txt .card-title { margin: 0 0 .3rem; font-size: 1rem; }
.sym-txt p { margin: 0 0 .35rem; }
.sym-txt p:last-child { margin-bottom: 0; }
.sym-txt .card-meta { color: #4A4742; font-size: .88rem; }
.sym-svg { display: block; max-width: 100%; height: auto; }

/* ---------- Outil de recherche (révélé par le JS seulement) ---------- */
.sym-filter { margin: 1.2rem 0; }
.sym-filter .field { display: flex; flex-direction: column; gap: .3rem; }
.sym-filter label { font-weight: 600; }
.sym-filter input {
    width: 100%;
    max-width: 26rem;
    padding: .55rem .7rem;
    font: inherit;
    color: var(--mi-encre, #17161A);
    border: 1px solid #8C867C;
    border-radius: 8px;
    background: #fff;
}
.sym-empty { padding: .8rem .9rem; border-left: 3px solid var(--mi-indigo, #2E3550); }
[hidden] { display: none !important; }

/* ---------- Au-delà du mobile ---------- */
@media (min-width: 600px) {
    .sym-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .sym-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    .ent-card, .ent-pilier, .sym-item { transition: none !important; }
}

/* ---------- Impression : la page des symboles doit tenir dans un placard ---------- */
@media print {
    .sym-filter, .toc, .related, .promo-slot, .ent-pilier-syms { display: none !important; }
    .sym-item, .ent-card, .ent-pilier, .sym-chip {
        border-color: #000;
        background: #fff;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .sym-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
    .sym-draw, .sym-txt .card-title { color: #000; }
    .sym-txt .card-meta, .ent-card .card-meta { color: #222; }
    .callout, .callout-warn, .callout-tip { border: 1px solid #000; }
}