/* ════════════════════════════════════════════════════════════════════
   Table des types Pokémon — [fq_typechart]

   Ce fichier ne fixe AUCUNE couleur en dur : il consomme les jetons de
   design du cœur FlexQuiz. Il suit donc automatiquement l'apparence
   active (Écarlate/Violet, Or/Argent, Rouge/Vert/Bleu ou style neutre).

   Seules exceptions assumées : les couleurs officielles des 18 types,
   fournies par la base de données via la variable --fqpkm-c, et les
   couleurs de multiplicateur (×2 / ×0,5 / ×0) qui doivent rester
   lisibles et constantes d'une apparence à l'autre.
   ════════════════════════════════════════════════════════════════════ */

.fqpkm-tc {
    --fqpkm-x2:  #E4726A;
    --fqpkm-x05: #C9C9AE;
    --fqpkm-x0:  #8A8AA6;

    font-size: var(--fq-font-size, 17px);
    font-family: var(--fq-font, sans-serif);
    color: var(--fq-ink, #1F2937);
    max-width: 1080px;
    margin: 0 auto;
    padding: 8px 0 32px;
    letter-spacing: var(--fq-letter-spacing, normal);
}
.fqpkm-tc *, .fqpkm-tc *::before, .fqpkm-tc *::after { box-sizing: border-box; }
.fqpkm-tc img { image-rendering: pixelated; }

.fqpkm-tc-box {
    background: var(--fq-surface, #fff);
    border: var(--fq-border-width, 2px) solid var(--fq-border, #E0E0E0);
    border-radius: var(--fq-radius, 12px);
    box-shadow: var(--fq-shadow, 0 4px 20px rgba(0,0,0,0.10));
    padding: 22px;
    margin-bottom: 22px;
}

.fqpkm-tc-h2 {
    font-family: var(--fq-font-display, inherit);
    font-size: 1.25em;
    text-align: center;
    margin: 0 0 14px;
    color: var(--fq-ink, #1F2937);
}

.fqpkm-tc-explorer__hint {
    text-align: center;
    font-size: 0.92em;
    color: var(--fq-ink-soft, #6B7280);
    margin: 0 0 14px;
}

/* ── Pastilles de type ─────────────────────────────────────────────── */
.fqpkm-tc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    color: #fff;
    background: var(--fqpkm-c, #888);
    border: 2px solid var(--fq-border, #1F2937);
    border-radius: var(--fq-radius-sm, 6px);
    padding: 5px 10px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
    line-height: 1.3;
}
.fqpkm-tc-chip--btn {
    font-family: inherit;
    cursor: pointer;
    transition: transform var(--fq-transition, 0.2s ease), outline-color var(--fq-transition, 0.2s ease);
    outline: 3px solid transparent;
}
.fqpkm-tc-chip--btn:hover,
.fqpkm-tc-chip--btn.is-active {
    transform: translateY(-3px);
    outline-color: var(--fq-primary, #4338CA);
}
.fqpkm-tc-chip--btn:focus-visible {
    outline-color: var(--fq-primary, #4338CA);
    outline-offset: 2px;
}

.fqpkm-tc-explorer__picker,
.fqpkm-tc-typegrid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 14px 0;
}

/* ── Résultat de l'explorateur ─────────────────────────────────────── */
.fqpkm-tc-explorer__result {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 18px;
    border-top: 1px solid var(--fq-border, #E0E0E0);
    padding-top: 18px;
}
.fqpkm-tc-explorer__coltitle {
    font-family: var(--fq-font-display, inherit);
    font-size: 1em;
    margin: 0 0 10px;
}
.fqpkm-tc-explorer__result dl { margin: 0; }
.fqpkm-tc-explorer__result dt { margin: 12px 0 6px; }
.fqpkm-tc-explorer__result dd {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.9em;
    color: var(--fq-ink-soft, #6B7280);
}

.fqpkm-tc-tag {
    display: inline-block;
    font-size: 0.82em;
    border: 2px solid var(--fq-border, #1F2937);
    border-radius: var(--fq-radius-sm, 4px);
    padding: 3px 8px;
    color: var(--fq-ink, #1F2937);
}
.fqpkm-tc-tag--x2  { background: var(--fqpkm-x2); color: #fff; }
.fqpkm-tc-tag--x05 { background: var(--fqpkm-x05); }
.fqpkm-tc-tag--x0  { background: var(--fqpkm-x0); color: #fff; }

/* ── Grille 18 × 18 ────────────────────────────────────────────────── */
.fqpkm-tc-gridscroll { overflow-x: auto; }
.fqpkm-tc-grid {
    border-collapse: collapse;
    margin: 0 auto;
    font-size: 0.85em;
}
.fqpkm-tc-grid th,
.fqpkm-tc-grid td {
    border: 2px solid var(--fq-border, #1F2937);
    text-align: center;
}
.fqpkm-tc-grid thead th {
    background: var(--fq-header-from, #1F2937);
    padding: 5px;
}
.fqpkm-tc-grid__corner {
    color: var(--fq-header-ink, #fff);
    font-size: 1em;   /* déjà réduit par .fqpkm-tc-grid : pas de cumul */
    padding: 4px 6px !important;
}
.fqpkm-tc-grid tbody th {
    background: var(--fqpkm-c, var(--fq-surface-2, #F5F5F5));
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
    padding: 3px 9px;
    text-align: left;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-bottom: 2px solid var(--fq-border, #1F2937);
}
.fqpkm-tc-grid__cell {
    width: 30px;
    min-width: 30px;
    height: 28px;
    background: var(--fq-surface, #fff);
}
.fqpkm-tc-grid__cell--x2  { background: var(--fqpkm-x2); color: #fff; font-weight: 700; }
.fqpkm-tc-grid__cell--x05 { background: var(--fqpkm-x05); }
.fqpkm-tc-grid__cell--x0  { background: var(--fqpkm-x0); color: #fff; }
.fqpkm-tc-grid__abbr { font-size: 1em; color: var(--fq-header-ink, #fff); }   /* pas de cumul */
.fqpkm-tc-grid__legend {
    text-align: center;
    font-size: 0.82em;
    margin-top: 14px;
    color: var(--fq-ink-soft, #6B7280);
}

@media (max-width: 640px) {
    .fqpkm-tc-explorer__result { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .fqpkm-tc-chip--btn { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Panneaux repliables, modes, double type et équipe
   ════════════════════════════════════════════════════════════════════ */

.fqpkm-tc-panel { padding: 0; }
.fqpkm-tc-summary {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    cursor: pointer; list-style: none;
    padding: 18px 22px;
    font-family: var(--fq-font-display, inherit);
    border-radius: var(--fq-radius, 12px);
}
.fqpkm-tc-summary::-webkit-details-marker { display: none; }
.fqpkm-tc-summary::before {
    content: '▶'; color: var(--fq-primary, #4338CA); font-size: 0.8em;
    transition: transform 0.15s ease;
}
.fqpkm-tc-panel[open] > .fqpkm-tc-summary::before { transform: rotate(90deg); }
.fqpkm-tc-summary__title { font-size: 1.15em; font-weight: 700; }
.fqpkm-tc-summary__hint { font-size: 0.85em; color: var(--fq-ink-soft, #6B7280); }
.fqpkm-tc-panel__body { padding: 0 22px 22px; }

.fqpkm-tc-hint { font-size: 0.9em; color: var(--fq-ink-soft, #6B7280); margin: 0 0 12px; }

/* ── Onglets de mode ── */
.fqpkm-tc-modes { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.fqpkm-tc-mode {
    font: inherit; font-size: 0.9em; cursor: pointer;
    background: var(--fq-surface-2, #F5F5F5);
    color: var(--fq-ink, #1F2937);
    border: var(--fq-border-width, 2px) solid var(--fq-border, #E0E0E0);
    border-radius: 999px; padding: 8px 18px;
    transition: background var(--fq-transition, .2s), color var(--fq-transition, .2s);
}
.fqpkm-tc-mode:hover { background: var(--fq-primary-soft, #EEF2FF); }
.fqpkm-tc-mode.is-active {
    background: var(--fq-primary, #4338CA);
    color: var(--fq-primary-ink, #fff);
    border-color: var(--fq-primary, #4338CA);
    font-weight: 700;
}

.fqpkm-tc-picker { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; }

/* ── Résultats ── */
.fqpkm-tc-result {
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
    margin-top: 18px; padding-top: 18px;
    border-top: 1px solid var(--fq-border, #E0E0E0);
}
.fqpkm-tc-result--wide { display: block; }
.fqpkm-tc-coltitle { font-family: var(--fq-font-display, inherit); font-size: 1em; margin: 0 0 10px; }
.fqpkm-tc-result dl { margin: 0; }
.fqpkm-tc-result dt { margin: 12px 0 6px; }
.fqpkm-tc-result dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.fqpkm-tc-tag--x4  { background: #C0392B; color: #fff; }
.fqpkm-tc-tag--x1  { background: var(--fq-surface-2, #eee); }

/* ── Emplacements du double type ── */
.fqpkm-tc-slots { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.fqpkm-tc-slot {
    display: flex; flex-direction: column; gap: 5px;
    background: var(--fq-surface-2, #F5F5F5);
    border: 2px dashed var(--fq-border, #E0E0E0);
    border-radius: var(--fq-radius-sm, 8px);
    padding: 10px 16px; min-width: 150px;
}
.fqpkm-tc-slot.is-filled { border-style: solid; border-color: var(--fq-primary, #4338CA); }
.fqpkm-tc-slot__label { font-size: 0.75em; text-transform: uppercase; letter-spacing: .6px; color: var(--fq-ink-soft, #6B7280); }
.fqpkm-tc-slot__value { font-size: 0.9em; }

.fqpkm-tc-btn {
    font: inherit; font-size: 0.88em; cursor: pointer;
    background: var(--fq-primary, #4338CA); color: var(--fq-primary-ink, #fff);
    border: none; border-radius: var(--fq-radius-sm, 8px); padding: 10px 18px;
}
.fqpkm-tc-btn:hover { background: var(--fq-primary-strong, #3730A3); }
.fqpkm-tc-btn--ghost {
    background: transparent; color: var(--fq-ink-soft, #6B7280);
    border: 2px solid var(--fq-border, #E0E0E0);
}
.fqpkm-tc-btn--ghost:hover { background: var(--fq-surface-2, #F5F5F5); color: var(--fq-ink, #1F2937); }

/* ── Équipe ── */
.fqpkm-tc-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; margin-bottom: 14px; }
.fqpkm-tc-member {
    background: var(--fq-surface-2, #F5F5F5);
    border: var(--fq-border-width, 2px) solid var(--fq-border, #E0E0E0);
    border-radius: var(--fq-radius-sm, 8px);
    padding: 12px 14px;
}
.fqpkm-tc-member__head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.8em; text-transform: uppercase; letter-spacing: .6px;
    color: var(--fq-ink-soft, #6B7280); margin-bottom: 8px;
}
.fqpkm-tc-member__del {
    font: inherit; font-size: 1.3em; line-height: 1; cursor: pointer;
    background: none; border: none; color: var(--fq-danger, #E74C3C); padding: 0 4px;
}
.fqpkm-tc-member__slots { display: flex; flex-direction: column; gap: 6px; }
.fqpkm-tc-slotbtn {
    font: inherit; font-size: 0.85em; cursor: pointer; text-align: left;
    background: var(--fq-surface, #fff);
    border: 2px dashed var(--fq-border, #E0E0E0);
    border-radius: var(--fq-radius-sm, 6px); padding: 7px 10px;
}
.fqpkm-tc-slotbtn.is-empty { color: var(--fq-ink-soft, #6B7280); }
.fqpkm-tc-slotbtn:hover { border-color: var(--fq-primary, #4338CA); }
.fqpkm-tc-teamactions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.fqpkm-tc-picker-wrap {
    background: var(--fq-primary-soft, #EEF2FF);
    border-radius: var(--fq-radius-sm, 8px);
    padding: 12px 14px; margin-bottom: 14px;
}

/* ── Couverture d'équipe ── */
.fqpkm-tc-coverage { display: flex; flex-direction: column; gap: 5px; }
.fqpkm-tc-cov { display: grid; grid-template-columns: 130px 1fr 56px; gap: 10px; align-items: center; }
.fqpkm-tc-cov.is-alert { background: var(--fq-danger-soft, #FEE2E2); border-radius: 6px; }
.fqpkm-tc-cov__bar {
    display: flex; height: 14px; border-radius: 999px; overflow: hidden;
    background: var(--fq-surface-2, #eee);
}
.fqpkm-tc-cov__weak { background: var(--fqpkm-x2); }
.fqpkm-tc-cov__res  { background: #4E9E3E; }
.fqpkm-tc-cov__num { font-size: 0.8em; color: var(--fq-ink-soft, #6B7280); text-align: right; }
.fqpkm-tc-legend2 { font-size: 0.82em; color: var(--fq-ink-soft, #6B7280); margin-top: 12px; }
.fqpkm-tc-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; }
.fqpkm-tc-dot--weak { background: var(--fqpkm-x2); }
.fqpkm-tc-dot--res  { background: #4E9E3E; }
.fqpkm-tc-warn {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    background: var(--fq-warning-soft, #FEF3C7);
    border-left: 4px solid var(--fq-warning, #F59E0B);
    border-radius: 0 6px 6px 0; padding: 10px 14px; margin-top: 14px; font-size: 0.9em;
}

@media (max-width: 640px) {
    .fqpkm-tc-result { grid-template-columns: 1fr; }
    .fqpkm-tc-cov { grid-template-columns: 110px 1fr 50px; }
    .fqpkm-tc-panel__body { padding: 0 14px 18px; }
    .fqpkm-tc-summary { padding: 14px; }
}