/* ============================================================
   domains/mode/css/tailles.css — rubrique TAILLES (lot B).
   Chargée par le header quand $mi_ctx['css'] === 'tailles'.

   Ne style QUE les classes propres au lot (préfixe `tl-`) + quelques ajustements
   LOCAUX à l'intérieur de ses blocs. Les classes du socle (.tool, .field, .tbl,
   .result-box, .callout, .steps, .card…) appartiennent au lot A : on ne les
   redéfinit pas globalement.

   Garde-fous : contraste AA ≥ 4,5:1 (couleurs reprises des tokens du socle,
   tous documentés ≥ 4,5:1), :focus-visible visible sur chaque élément interactif,
   prefers-reduced-motion respecté, aucun débordement horizontal à 360 px
   (les tables larges passent par le .tbl-wrap du socle).
   ============================================================ */

/* ---------- En-tête de l'outil ---------- */
.tl-tool-h {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.15rem;
}
.tl-tool-h .ico { color: var(--brass-txt, #845A1C); flex: none; }

/* ---------- Champ : valeur + unité (cm, mm) ---------- */
.tl-input-unit {
    display: flex;
    align-items: center;
    gap: .55rem;
}
.tl-input-unit input {
    flex: 1 1 auto;
    min-width: 0;
}
.tl-unit {
    flex: none;
    color: var(--muted, #56505A);
    font-size: .95rem;
    font-weight: 600;
}

/* ---------- Boîte de résultat : états erreur / vide ---------- */
.tl-r-err {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--warn, #8A3310);   /* 7,25:1 et plus selon le fond */
    font-size: 1.15rem;
}
.tl-r-err .ico { flex: none; }
.tl-err-list {
    margin: .4rem 0 0;
    padding-left: 1.2rem;
    color: var(--ink, #17161A);
}
.tl-err-list li { margin: .2rem 0; }
.tl-r-empty { color: var(--muted, #56505A); margin: 0; }

/* La table de correspondances calculée, à l'intérieur de la boîte de résultat. */
.result-box .tbl-wrap { margin-top: .75rem; }
.result-box .tbl { background: var(--paper, #fff); }

/* ---------- Tables successives (guide, pays, outil) ---------- */
.tl-tables > .tbl-wrap { margin-top: 1.25rem; }
.tl-tables > .tbl-wrap:first-child,
.tl-tables > .tbl-cap:first-child { margin-top: 0; }

/* ---------- Mini-table des conversions vedettes (hub) ---------- */
.tl-vedettes th[scope="row"] { font-weight: 500; }
.tl-vedettes .item-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--indigo, #2E3550);   /* 11,29:1 sur blanc */
    text-decoration: none;
    font-weight: 600;
}
.tl-vedettes .item-link:hover { text-decoration: underline; }
.tl-vedettes .item-link .ico { width: 18px; height: 18px; flex: none; color: var(--brass-txt, #845A1C); }
.tl-vedettes .item-link:focus-visible {
    outline: 3px solid var(--focus, #2E3550);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Les pièges d'un guide ---------- */
.tl-pieges {
    display: grid;
    gap: 14px;
}
@media (min-width: 720px) {
    .tl-pieges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tl-piege {
    padding: .9rem 1rem;
    background: var(--warn-bg, #FDEEE8);
    border: 1px solid #F0D3C6;
    border-left: 4px solid var(--warn, #8A3310);
    border-radius: var(--r-s, 9px);
}
.tl-piege-h {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .35rem;
    color: var(--warn, #8A3310);   /* 7,67:1 sur --warn-bg */
}
.tl-piege-h .ico { flex: none; }
.tl-piege p:last-child { margin-bottom: 0; color: var(--ink, #17161A); }

/* ---------- Liste « à vérifier avant d'acheter à l'étranger » ---------- */
.tl-check {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.tl-check li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .9rem;
    background: var(--tip-bg, #F6EEDC);
    border: 1px solid var(--line, #E4DCCE);
    border-radius: var(--r-s, 9px);
}
.tl-check li .ico {
    flex: none;
    margin-top: 1px;
    color: var(--ok, #1F6B4F);   /* 6,00:1 et plus */
}
.tl-check li > span { color: var(--ink, #17161A); }

/* ---------- Respect du mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    .tl-vedettes .item-link,
    .tl-piege { transition: none; }
}