/*
 * Outils Pokémon (inc/outils.php) : accueil /outils/, calculateurs et page des natures.
 * Couleurs : jetons de tokens.css (mode sombre automatique). Résultats : rouge = faiblesse, vert = résistance, encre = immunité.
 */

.ot {
    --ot-weak: #E5484D; --ot-weak-bg: color-mix(in srgb, #E5484D 16%, var(--white));
    --ot-res: var(--green); --ot-res-bg: color-mix(in srgb, var(--green) 16%, var(--white));
    --ot-imm-bg: color-mix(in srgb, var(--ink) 14%, var(--white));
    background: var(--cream);
    padding-bottom: 64px;
}
.ot a { text-underline-offset: 3px; }
.ot-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- En-tête ---------- */
.ot-hero { padding: 24px 0 28px; background: var(--white); border-bottom: 1px solid var(--border); }
.ot-hero .pf-breadcrumb, .ot-hero .breadcrumb { font-size: 13px; color: var(--ink-light); }
.ot-kicker { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.ot-kicker > span { padding: 4px 11px; border-radius: var(--r-full); background: var(--yellow-bg); border: 1px solid var(--border); font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--ink); }
.ot-title { margin: 0; max-width: 26ch; font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; color: var(--ink); }
.ot-lead { max-width: 72ch; margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-mid); }

/* ---------- Application ---------- */
.ot-body { padding-top: 24px; display: grid; gap: 28px; }
.ot-app { padding: 20px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-sm); min-width: 0; }
.ot-app--plain { padding: 0; background: none; border: 0; box-shadow: none; }
.ot-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; }
.ot-field { display: grid; gap: 5px; min-width: 0; }
.ot-field--grow { flex: 1 1 240px; }
.ot-field label { font-size: 13px; font-weight: 700; color: var(--ink-mid); }
.ot-field small { font-weight: 500; color: var(--ink-light); }
.ot-field input, .ot-field select, .ot-slot input, .ot-table input {
    width: 100%; min-height: 44px; padding: 9px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--border);
    background: var(--surface); color: var(--ink); font: inherit; font-size: 16px;
}
.ot-field select { min-width: 9.5em; }
.ot-field input:focus, .ot-field select:focus, .ot-slot input:focus, .ot-table input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.ot-or { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--ink-light); }
.ot-combo { position: relative; }
.ot-suggest { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; border-radius: var(--r-sm); background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-lg); max-height: 340px; overflow-y: auto; }
.ot-suggest__item, .ot-suggest__none { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-radius: var(--r-xs); cursor: pointer; font-size: 15px; color: var(--ink); }
.ot-suggest__none { cursor: default; color: var(--ink-light); }
.ot-suggest__item:hover, .ot-suggest__item.is-active { background: var(--surface-2); }
.ot-suggest__num { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-light); }
.ot-suggest__types { display: inline-flex; gap: 4px; margin-left: auto; }
.ot-suggest .type-badge, .ot-result .type-badge, .ot-text .type-badge { font-size: 12px; padding: 3px 9px; }
.ot-text a.type-badge { text-decoration: none; color: #fff; }

.ot-tabs { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.ot-tabs button { padding: 9px 16px; border-radius: var(--r-full); border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ot-tabs button[aria-selected="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.ot-panel { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; }
.ot-panel[hidden] { display: none; }
.ot-panel .ot-field { flex: 1 1 120px; }
.ot-submit { min-height: 44px; }
.ot-check { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-mid); }
.ot-check input { width: 18px; height: 18px; }

.ot-quick { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 16px 0 0; font-size: 14px; }
.ot-quick span { font-weight: 700; color: var(--ink-mid); }

/* ---------- Résultat ---------- */
.ot-result { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--border); display: grid; gap: 14px; min-width: 0; }
.ot-mon { display: flex; align-items: center; gap: 16px; }
.ot-mon img { width: 96px; height: 96px; object-fit: contain; flex: none; }
.ot-mon p { margin: 4px 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ot-mon__num { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-light); }
.ot-mon__name { margin: 0; font-size: 24px; font-weight: 800; color: var(--ink); }
.ot-mon__link { font-size: 14px; font-weight: 700; }
.ot-sum { margin: 0; padding: 12px 16px; border-radius: var(--r-md); background: var(--yellow-bg); border-left: 4px solid var(--yellow); font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.ot-sum--warn { background: var(--ot-weak-bg); border-left-color: var(--ot-weak); }
.ot-sum .type-badge { margin: 1px 2px; }
.ot-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ot-bucket { padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border); }
.ot-bucket p { margin: 0; }
.ot-bucket__mult { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ink); }
.ot-bucket__label { font-size: 13px; font-weight: 700; color: var(--ink-mid); margin-bottom: 8px !important; }
.ot-bucket__types { display: flex; flex-wrap: wrap; gap: 4px; }
.ot-bucket--4, .ot-bucket--2 { background: var(--ot-weak-bg); border-color: color-mix(in srgb, var(--ot-weak) 40%, var(--border)); }
.ot-bucket--4 .ot-bucket__mult { color: var(--ot-weak); }
.ot-bucket--05, .ot-bucket--025 { background: var(--ot-res-bg); border-color: color-mix(in srgb, var(--ot-res) 40%, var(--border)); }
.ot-bucket--0 { background: var(--ot-imm-bg); }
.ot-normal summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink-mid); }
.ot-normal p { display: flex; flex-wrap: wrap; gap: 4px; }
.ot-h2 { margin: 6px 0 0; font-size: 20px; font-weight: 800; color: var(--ink); }
.ot-h3 { margin: 4px 0 0; font-size: 17px; font-weight: 800; color: var(--ink); }
.ot-atk p { margin: 6px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ot-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-light); }
.ot-muted { color: var(--ink-light); }
.ot-bad { color: var(--ot-weak); font-weight: 700; }
.ot-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.ot-big p { margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); display: grid; gap: 2px; }
.ot-big span { font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-mid); }
.ot-big b { font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ink); }
.ot-gostats { gap: 6px 14px !important; font-size: 14px; color: var(--ink-mid); }
.ot-gostats b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ot-linkbtn { padding: 4px 10px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }

/* ---------- Tableaux ---------- */
.ot-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
.ot-table, .ot-cov { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; background: var(--white); color: var(--ink); }
.ot-table caption { caption-side: top; text-align: left; padding: 0 0 8px; font-weight: 700; color: var(--ink-mid); }
.ot-table th, .ot-table td, .ot-cov th, .ot-cov td { padding: 8px 10px; border-bottom: 1px solid var(--border-light); text-align: left; vertical-align: middle; }
.ot-table thead th, .ot-cov thead th { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--ink-mid); background: var(--surface-2); white-space: nowrap; }
.ot-table td .type-badge, .ot-table th .type-badge { margin: 1px 2px 1px 0; }
.ot-table--types td { min-width: 150px; }
.ot-table--natures .ot-up { color: var(--green); font-weight: 700; }
.ot-table--natures .ot-down { color: var(--ot-weak); font-weight: 700; }
.ot-table--natures .is-neutral th { color: var(--ink-mid); }
.ot-table--grid input { min-height: 38px; padding: 6px 8px; max-width: 6.5em; }
.ot-table--grid tfoot th, .ot-table--grid tfoot td { font-weight: 700; border-bottom: 0; }
.ot-evtotal.is-over { color: var(--ot-weak); }
.ot-app [data-mode-only="iv"] { display: none; }
.ot-app.is-iv [data-mode-only="iv"] { display: table-cell; }
.ot-table--stats .ot-barcell { width: 40%; min-width: 90px; }
.ot-bar { display: block; height: 10px; border-radius: var(--r-full); background: var(--accent); }
.ot-nat { font-size: 11px; }
.ot-nat--up { color: var(--green); }
.ot-nat--down { color: var(--ot-weak); }
.ot-total th, .ot-total td { font-weight: 800; border-bottom: 0; }
.ot-cov th, .ot-cov td { text-align: center; padding: 6px; }
.ot-cov tbody th { text-align: left; }
.ot-cov thead img { width: 40px; height: 40px; object-fit: contain; display: block; margin: 0 auto; }
.ot-x { font-weight: 800; min-width: 38px; }
.ot-x--4, .ot-x--2 { background: var(--ot-weak-bg); color: var(--ot-weak); }
.ot-x--05, .ot-x--025 { background: var(--ot-res-bg); color: var(--ot-res); }
.ot-x--0 { background: var(--ot-imm-bg); color: var(--ink); }
.ot-n { font-weight: 800; color: var(--ink-light); }
.ot-n--w { color: var(--ot-weak); }
.ot-n--r { color: var(--ot-res); }
.ot-cov tr.is-alert th[scope="row"] { box-shadow: inset 4px 0 0 var(--ot-weak); }
.ot-cov tr.is-alert { background: color-mix(in srgb, var(--ot-weak) 6%, var(--white)); }

/* ---------- Équipe ---------- */
.ot-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ot-slot { position: relative; display: grid; gap: 5px; padding: 10px; border-radius: var(--r-md); border: 1.5px dashed var(--border); background: var(--surface); }
.ot-slot.is-set { border-style: solid; }
.ot-slot label { font-size: 12.5px; font-weight: 700; color: var(--ink-mid); }
.ot-slot__clear { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-light); font-size: 20px; line-height: 1; cursor: pointer; }
.ot-slot:not(.is-set) .ot-slot__clear { visibility: hidden; }

/* ---------- Texte, FAQ, cartes ---------- */
.ot-text { max-width: 78ch; font-size: 16.5px; line-height: 1.65; color: var(--ink-mid); }
.ot-text h2 { margin: 30px 0 10px; font-size: clamp(21px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.ot-text h2:first-child { margin-top: 0; }
.ot-text strong { color: var(--ink); }
.ot-text ul { padding-left: 22px; display: grid; gap: 6px; }
.ot-text ul ul { margin-top: 6px; }
.ot-text .ot-tablewrap { max-width: none; margin: 12px 0; }
.ot-formula { padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.ot-faq { display: grid; gap: 8px; }
.ot-faq details { padding: 12px 16px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--border); }
.ot-faq summary { cursor: pointer; font-weight: 800; color: var(--ink); }
.ot-faq p { margin: 8px 0 0; }
.ot-more h2, .ot-hubgroup h2 { margin: 0 0 12px; font-size: clamp(20px, 2.4vw, 24px); font-weight: 800; color: var(--ink); }
.ot-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ot-card { display: grid; align-content: start; gap: 6px; padding: 16px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--border); text-decoration: none; color: var(--ink-mid); font-size: 14.5px; line-height: 1.45; transition: border-color .15s, transform .15s; }
.ot-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.ot-card strong { font-size: 16.5px; color: var(--ink); }
.ot-card__icon { font-size: 26px; }
.ot-cards--big .ot-card { padding: 20px; }
.ot-more__links { margin: 14px 0 0; font-size: 14.5px; }
.ot-hubgroup + .ot-hubgroup { margin-top: 4px; }

@media (max-width: 640px) {
    .ot-app { padding: 14px; }
    .ot-mon img { width: 72px; height: 72px; }
    .ot-big b { font-size: 24px; }
    .ot-or { flex: 1 1 100%; margin: 0; }
    .ot-form > .ot-field:not(.ot-field--grow) { flex: 1 1 140px; }
}

/* Verrou membres (outil.php + outils-core.js) : visiteurs non connectés. */
.ot-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 0 0 16px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--yellow-bg); border: 1px solid var(--border); }
.ot-lock[hidden] { display: none; }
.ot-lock__icon { font-size: 28px; line-height: 1; }
.ot-lock__body { flex: 1 1 260px; min-width: 0; }
.ot-lock__body p { margin: 0; }
.ot-lock__kicker { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-light); }
.ot-lock__title { margin-top: 2px !important; font-size: 18px; font-weight: 800; color: var(--ink); text-wrap: balance; }
.ot-lock__text { margin-top: 4px !important; font-size: 14px; color: var(--ink-light); }
.ot-lock__cta { display: flex; flex-wrap: wrap; gap: 8px; }
.ot-app.is-checking { opacity: .7; }
.ot-app.is-locked { opacity: .45; filter: grayscale(.6); pointer-events: none; user-select: none; }