* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; background: #0f1117; color: white; }
.container { width: 90%; max-width: 1180px; margin: 60px auto; }
h1 { color: #f0b429; margin-bottom: 5px; }
.subtitle { color: #9da5b4; margin-bottom: 35px; }
.card { background: #191c24; border: 1px solid #2b303b; border-radius: 12px; padding: 26px; margin-bottom: 20px; }
select { width: 100%; padding: 14px; background: #101218; color: white; border: 1px solid #343946; border-radius: 8px; font-size: 16px; }
button { margin-top: 18px; padding: 12px 24px; border: 0; border-radius: 8px; background: #f0b429; color: #111; font-weight: bold; cursor: pointer; }
button:hover { opacity: 0.9; }
.raid-name { font-size: 20px; font-weight: bold; }
.raid-details { margin-top: 7px; color: #a9b0bd; }
.boss { margin-top: 14px; background: #11141a; border: 1px solid #303642; border-radius: 10px; overflow: hidden; }
.boss-header { padding: 20px; cursor: pointer; display: flex; justify-content: space-between; }
.boss-header:hover { background: #161a22; }
.boss-name { font-size: 19px; font-weight: bold; }
.boss-summary { margin-top: 7px; color: #a9b0bd; }
.arrow { color: #f0b429; }
.boss-details { display: none; border-top: 1px solid #303642; padding: 20px; background: #0d1015; }
.fight-row { padding: 14px; margin-top: 8px; border-radius: 7px; background: #151922; border: 1px solid #272d38; cursor: pointer; }
.fight-row:hover { border-color: #f0b429; }
.kill { color: #55d187; font-weight: bold; }
.wipe { color: #ff6b6b; font-weight: bold; }
.section-title { margin-top: 18px; margin-bottom: 8px; font-weight: bold; }
.more-button, .reference-toggle, .detail-toggle { background: #262c37; color: white; border: 1px solid #3d4554; }
.player-panel { margin-top: 18px; padding: 20px; border-radius: 10px; background: #191c24; border: 1px solid #f0b429; }
.selected-player { margin-top: 14px; padding: 14px; background: #101218; border-radius: 8px; }
.analyse-button, .compare-button { width: 100%; font-size: 16px; }
.analysis, .comparison-box { margin-top: 20px; padding: 22px; background: #11141a; border: 1px solid #f0b429; border-radius: 10px; }
.analysis-grid, .comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; }
.stat { padding: 15px; background: #191c24; border-radius: 8px; border: 1px solid #303642; }
.stat-value { font-size: 24px; font-weight: bold; color: #f0b429; }
.stat-label { margin-top: 5px; color: #9da5b4; }
.table-scroll { overflow-x: auto; margin-top: 14px; }
.spell-table, .comparison-table, .reference-table, .damage-table, .example-table { width: 100%; border-collapse: collapse; margin-top: 0; }
.damage-table { min-width: 1050px; }
.example-table { min-width: 760px; }
.spell-table th, .spell-table td, .comparison-table th, .comparison-table td, .reference-table th, .reference-table td, .damage-table th, .damage-table td, .example-table th, .example-table td { text-align: left; padding: 10px; border-bottom: 1px solid #303642; }
.spell-table th, .comparison-table th, .reference-table th, .damage-table th, .example-table th { color: #aab2c0; white-space: nowrap; }
.spell-name { display: flex; align-items: center; gap: 12px; min-width: 190px; }
.spell-icon { width: 36px; height: 36px; border-radius: 6px; border: 1px solid #454b57; flex-shrink: 0; }
.damage-share { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.damage-share-pct { width: 54px; font-weight: bold; }
.damage-bar-wrap { height: 10px; flex: 1; min-width: 75px; background: #222833; border-radius: 5px; overflow: hidden; }
.damage-bar { height: 100%; background: #c9b56b; border-radius: 5px; }
.number-cell { white-space: nowrap; }
.hidden-damage-row { display: none; }
.status-missing, .status-below { color: #ff7676; font-weight: bold; }
.status-above { color: #ffb86b; font-weight: bold; }
.status-close, .status-variable, .status-uncommon { color: #9da5b4; }
.summary-box { margin-top: 18px; padding: 16px; background: #191c24; border: 1px solid #303642; border-radius: 8px; }
.summary-line { margin-top: 8px; }
.improvement-box { margin-top: 14px; padding: 17px; background: #121a16; border: 1px solid #315b42; border-radius: 8px; }
.improvement-title { color: #55d187; font-size: 17px; font-weight: bold; margin-bottom: 10px; }
.improvement-item { margin-top: 9px; line-height: 1.5; }
.improvement-note { margin-top: 14px; padding-top: 10px; border-top: 1px solid #294337; color: #8f9a93; font-size: 12px; }
.reference-details { display: none; margin-top: 16px; }
.reference-link { color: #f0b429; text-decoration: none; }
.reference-link:hover { text-decoration: underline; }
.warning { color: #ffb86b; margin-top: 8px; }
.error { color: #ff6b6b; }
.small-note { color: #9da5b4; font-size: 13px; margin-top: 12px; }
.breakdown-title { margin-top: 30px; display: flex; justify-content: space-between; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.breakdown-subtitle { color: #9da5b4; font-size: 13px; margin-top: 5px; }
.total-line { margin-top: 10px; color: #c7cbd4; font-size: 14px; }
.reference-example { margin-top: 22px; padding: 18px; border: 1px solid #343d49; background: #151922; border-radius: 10px; }
.reference-example-title { font-size: 18px; font-weight: bold; }
.reference-example-head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.reference-example-meta { margin-top: 6px; color: #aeb5c1; }
.reference-chip { display: inline-block; margin-top: 8px; padding: 5px 9px; border-radius: 999px; background: #202633; color: #d6d9df; font-size: 12px; }
.reference-example-link { color: #f0b429; text-decoration: none; font-weight: bold; }
.reference-example-link:hover { text-decoration: underline; }
.good-diff { color: #55d187; }
.bad-diff { color: #ff7676; }
.neutral-diff { color: #a9b0bd; }

.priority-box { margin-top: 18px; padding: 18px; background: #151922; border: 1px solid #36404d; border-radius: 11px; }
.priority-title { font-size: 19px; font-weight: 800; }
.priority-subtitle { margin-top: 5px; color: #9da5b4; font-size: 13px; line-height: 1.4; }
.priority-list { display: grid; gap: 10px; margin-top: 14px; }
.priority-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 14px; background: #10141b; border: 1px solid #2c3440; border-radius: 9px; }
.priority-card.high { border-left: 4px solid #ff7676; }
.priority-card.medium { border-left: 4px solid #f0b429; }
.priority-card.low { border-left: 4px solid #5fc9ef; }
.priority-number { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #202633; font-weight: 800; }
.priority-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.priority-card-title { font-size: 16px; font-weight: 800; line-height: 1.35; }
.priority-observation { margin-top: 5px; color: #d2d7df; line-height: 1.45; }
.priority-action { margin-top: 7px; color: #c2c8d1; line-height: 1.45; }
.priority-info-tooltip { width: min(430px, 82vw); }
.inline-spell { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; white-space: nowrap; }
.inline-spell-icon { width: 20px; height: 20px; border-radius: 4px; border: 1px solid #454b57; object-fit: cover; flex-shrink: 0; }
.inline-spell.compact .inline-spell-icon { width: 18px; height: 18px; }
.inline-spell-name { font-weight: 800; }
.priority-action strong { color: #f2f3f5; }
.priority-ok { margin-top: 14px; padding: 14px; border: 1px solid rgba(85, 209, 135, .35); background: rgba(85, 209, 135, .07); border-radius: 9px; color: #bfe8cf; }
.priority-chip { display: inline-block; margin-top: 7px; padding: 4px 8px; border: 1px solid #343d49; background: #171c25; border-radius: 999px; color: #aeb5c1; font-size: 12px; }

.cycle-details { margin-top: 20px; border: 1px solid #f0b429; border-radius: 12px; background: #12161d; overflow: hidden; box-shadow: 0 0 0 1px rgba(240, 180, 41, .08); }
.cycle-details > summary { cursor: pointer; padding: 16px 18px; font-weight: 900; color: #11151b; background: #f0b429; list-style: none; display: flex; align-items: center; gap: 14px; transition: .15s ease; }
.cycle-details > summary:hover { background: #ffc13b; }
.cycle-details > summary::-webkit-details-marker { display: none; }
.cycle-details > summary::after { content: "▼"; margin-left: auto; color: #11151b; font-size: 16px; font-weight: 900; }
.cycle-details[open] > summary::after { content: "▲"; }
.cycle-summary-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cycle-summary-open, .cycle-summary-close { font-size: 17px; letter-spacing: .1px; }
.cycle-summary-close { display: none; }
.cycle-details[open] .cycle-summary-open { display: none; }
.cycle-details[open] .cycle-summary-close { display: inline; }
.cycle-summary-subtitle { font-size: 12px; font-weight: 800; color: #4b3906; }
.cycle-details-body { padding: 18px; }
.cycle-quality-card { padding: 17px; border: 1px solid #303946; background: #171c24; border-radius: 10px; }
.cycle-quality-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cycle-quality-title { font-size: 18px; font-weight: 900; }
.cycle-quality-score { font-size: 24px; font-weight: 900; }
.cycle-quality-explain { margin-top: 9px; color: #bdc4cf; line-height: 1.5; }
.cycle-quality-help { margin-top: 9px; color: #8e97a5; font-size: 12px; line-height: 1.45; }
.cycle-section { margin-top: 14px; padding: 15px; background: #0f1319; border: 1px solid #29313c; border-radius: 9px; }
.cycle-section-title { font-weight: 900; margin-bottom: 10px; font-size: 16px; }
.cycle-difference-list { display: grid; gap: 10px; }
.cycle-difference-card { padding: 13px; border-radius: 8px; background: #151a22; border: 1px solid #2f3743; }
.cycle-difference-card.high { border-left: 4px solid #ff7676; }
.cycle-difference-card.medium { border-left: 4px solid #f0b429; }
.cycle-difference-title { font-weight: 900; font-size: 15px; }
.cycle-compare-row { margin-top: 7px; display: grid; gap: 5px; color: #cbd1da; line-height: 1.4; }
.cycle-ref-line strong { color: #f0b429; }
.cycle-me-line strong { color: #6eb6ff; }
.cycle-action-box { margin-top: 9px; padding: 9px 11px; border-radius: 7px; background: rgba(255, 184, 107, .08); border: 1px solid rgba(255, 184, 107, .22); color: #ffd0a0; line-height: 1.4; }

.cycle-problem-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 42px; }
.cycle-problem-text { font-size: 16px; line-height: 1.4; }
.cycle-info-wrap { position: relative; flex-shrink: 0; }
.cycle-info-button { width: 28px; height: 28px; margin: 0; padding: 0; border-radius: 50%; border: 1px solid #667284; background: #202733; color: #dce6f5; font-size: 16px; font-family: Georgia, serif; font-weight: 900; font-style: italic; display: inline-flex; align-items: center; justify-content: center; cursor: help; }
.cycle-info-button:hover, .cycle-info-button:focus { border-color: #f0b429; background: #2a303a; color: #f0b429; outline: none; }
.cycle-info-tooltip { display: none; position: absolute; right: 0; top: 36px; z-index: 50; width: min(390px, 78vw); padding: 13px 14px; border-radius: 9px; border: 1px solid #4b5667; background: #0c1016; box-shadow: 0 12px 30px rgba(0,0,0,.45); color: #d7dde7; font-size: 13px; line-height: 1.5; text-align: left; font-family: Arial, sans-serif; font-style: normal; font-weight: 400; }
.cycle-info-tooltip strong { color: #fff; }
.cycle-info-wrap:hover .cycle-info-tooltip, .cycle-info-wrap:focus-within .cycle-info-tooltip { display: block; }
.cycle-problem-hint { margin-top: 6px; color: #9da7b5; font-size: 12px; }

.cycle-line { margin-top: 7px; line-height: 1.45; }
.cycle-spells { margin-top: 7px; line-height: 1.7; color: #d8dde5; }
.cycle-arrow { color: #6e7684; padding: 0 4px; }
.cycle-good { color: #55d187; font-weight: 800; }
.cycle-warn { color: #f0b429; font-weight: 800; }
.cycle-bad { color: #ff7676; font-weight: 800; }
.cycle-muted { color: #9da5b4; }
.timing-ok { color: #55d187; font-weight: 700; }
.timing-warn { color: #ffb86b; font-weight: 700; }
.trinket-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 9px; }
.trinket-icon { width: 30px; height: 30px; border-radius: 5px; border: 1px solid #454b57; flex-shrink: 0; }

.opener-score { margin-top: 12px; padding: 10px 12px; background: #171c24; border: 1px solid #303946; border-radius: 8px; }
.opener-sequence { margin-top: 12px; padding: 12px; background: #11161d; border: 1px solid #2a333f; border-radius: 8px; line-height: 2.1; }
.opener-sequence-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; margin: 2px 0; border-radius: 7px; background: #1a2029; border: 1px solid #313a47; }
.opener-prepull-tag { margin-left: 5px; padding: 1px 5px; border-radius: 999px; border: 1px solid #5b4a1d; background: rgba(240,180,41,.10); color: #ffd56a; font-size: 10px; font-weight: 850; white-space: nowrap; }
.opener-sequence-arrow { color: #6e7684; padding: 0 6px; }

.analysis-tabs { display: flex; gap: 8px; margin-top: 18px; padding-bottom: 4px; border-bottom: 1px solid #303642; flex-wrap: wrap; }
.analysis-tab-button { width: auto; margin: 0; padding: 10px 14px; background: #191e27; color: #c7cdd6; border: 1px solid #343d49; border-radius: 8px 8px 0 0; font-weight: 800; }
.analysis-tab-button:hover { border-color: #f0b429; color: #fff; }
.analysis-tab-button.active { background: #f0b429; color: #11151b; border-color: #f0b429; }
.analysis-tab-panel { display: none; }
.analysis-tab-panel.active { display: block; }

.timeline-analysis { margin-top: 18px; }
.timeline-summary-card { padding: 18px; border-radius: 10px; background: #151922; border: 1px solid #36404d; }
.timeline-summary-card.good { border-color: #315b42; background: #121a16; }
.timeline-summary-card.warning { border-color: #7a5a23; }
.timeline-summary-card.bad { border-color: #7e3434; background: #1a1214; }
.timeline-summary-title { font-size: 20px; font-weight: 900; }
.timeline-summary-meta { margin-top: 8px; color: #aab2c0; line-height: 1.5; }
.timeline-list { position: relative; margin-top: 18px; padding-left: 26px; }
.timeline-list::before { content: ""; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: #303846; }
.timeline-event { position: relative; margin-bottom: 12px; padding: 13px 14px; background: #11161d; border: 1px solid #2d3541; border-radius: 9px; }
.timeline-event::before { content: ""; position: absolute; left: -23px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: #7f8998; border: 2px solid #11141a; }
.timeline-event.high { border-left: 4px solid #ff7676; }
.timeline-event.high::before { background: #ff7676; }
.timeline-event.medium { border-left: 4px solid #f0b429; }
.timeline-event.medium::before { background: #f0b429; }
.timeline-event.low { border-left: 4px solid #5fc9ef; }
.timeline-event.low::before { background: #5fc9ef; }
.timeline-event-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.timeline-event-time { color: #f0b429; font-weight: 900; min-width: 48px; }
.timeline-event-title { font-weight: 900; }
.timeline-event-category { margin-left: auto; color: #9da5b4; font-size: 12px; }
.timeline-event-text { margin-top: 6px; color: #c8ced7; line-height: 1.5; }
.timeline-opener-compare { margin-top: 12px; display: grid; gap: 10px; }
.timeline-opener-block { padding: 11px 12px; border-radius: 9px; background: #0f141b; border: 1px solid #2e3744; }
.timeline-opener-block.target { background: rgba(240, 180, 41, .08); border: 2px solid #f0b429; box-shadow: 0 0 0 1px rgba(240, 180, 41, .12) inset; }
.timeline-opener-label { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: #9da5b4; font-weight: 900; margin-bottom: 8px; }
.timeline-opener-block.target .timeline-opener-label { color: #ffd35a; }
.timeline-opener-sequence { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.timeline-opener-chip { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 7px; background: #1a2029; border: 1px solid #343e4c; color: #e8ecf2; font-weight: 750; }
.timeline-opener-chip.target { background: rgba(240, 180, 41, .12); border-color: #80651f; color: #ffe08a; }
.timeline-opener-chip.current-mismatch { background: rgba(255, 118, 118, .10); border-color: #9a4747; color: #ff9b9b; }
.timeline-opener-chip.target-mismatch { background: rgba(85, 209, 135, .10); border-color: #347d51; color: #72e39f; box-shadow: 0 0 0 1px rgba(85, 209, 135, .08) inset; }
.timeline-opener-arrow { color: #6e7684; font-weight: 900; }
.timeline-opener-diff { margin-top: 10px; padding: 9px 10px; border-radius: 8px; background: #151922; border: 1px solid #343d49; color: #d8dde5; }
.timeline-opener-trinket-note { margin-top: 8px; color: #9da5b4; font-size: 12px; }
.timeline-empty { margin-top: 18px; padding: 18px; border: 1px solid #315b42; background: #121a16; color: #bfe8cf; border-radius: 9px; }

.log-state { margin-top: 18px; padding: 20px; border-radius: 10px; border: 1px solid #3a4352; background: #171a22; }
.log-state-title { font-size: 13px; color: #9da5b4; text-transform: uppercase; letter-spacing: .8px; font-weight: bold; }
.log-state-main { font-size: 30px; font-weight: 800; margin-top: 7px; }
.log-state-parse { font-size: 18px; font-weight: bold; margin-top: 7px; }
.log-state-text { margin-top: 8px; color: #c2c7d0; line-height: 1.45; }
.state-excellent { border-color: #8b5cf6; background: #181424; }
.state-excellent .log-state-main { color: #b99cff; }
.state-verygood { border-color: #3e8c62; background: #121b16; }
.state-verygood .log-state-main { color: #55d187; }
.state-good { border-color: #3b82a0; background: #111a20; }
.state-good .log-state-main { color: #5fc9ef; }
.state-ok { border-color: #9a7a32; background: #1d1a11; }
.state-ok .log-state-main { color: #f0b429; }
.state-bad { border-color: #8b4141; background: #211313; }
.state-bad .log-state-main { color: #ff7676; }
.state-unranked { border-color: #454b57; }
.state-unranked .log-state-main { color: #a9b0bd; }


/* ============================================================
   COMPARAISON RAPIDE : TOI VS REFERENCE
============================================================ */
.quick-compare { margin-top: 22px; padding: 20px; border: 1px solid #343d49; background: #151922; border-radius: 12px; }
.quick-compare-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.quick-compare-title { font-size: 20px; font-weight: 800; }
.quick-compare-meta { margin-top: 7px; color: #aeb5c1; }
.quick-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; }
.legend-chip { padding: 6px 10px; border-radius: 999px; border: 1px solid #343d49; background: #11141a; color: #c6cbd4; }
.legend-me { border-color: #2f6fab; color: #71b9ff; }
.legend-ref { border-color: #8d6f22; color: #f0b429; }
.quick-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.quick-stat { padding: 16px; border: 1px solid #303642; border-radius: 10px; background: #11141a; }
.quick-stat-label { color: #9da5b4; font-size: 13px; }
.quick-stat-value { margin-top: 5px; font-size: 27px; font-weight: 800; }
.quick-stat-me { border-color: #2f6fab; }
.quick-stat-me .quick-stat-value, .mine-value { color: #71b9ff; }
.quick-stat-ref { border-color: #8d6f22; }
.quick-stat-ref .quick-stat-value, .ref-value { color: #f0b429; }
.quick-stat-diff.good .quick-stat-value { color: #55d187; }
.quick-stat-diff.bad .quick-stat-value { color: #ff7676; }
.quick-stat-diff.neutral .quick-stat-value { color: #c1c7d0; }
.quick-table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.quick-table th, .quick-table td { text-align: left; padding: 11px 10px; border-bottom: 1px solid #303642; }
.quick-table th { color: #aab2c0; white-space: nowrap; font-size: 13px; }
.quick-table tr:last-child td { border-bottom: 0; }
.quick-table .spell-name { min-width: 210px; }
.diff-badge { display: inline-block; min-width: 74px; text-align: center; padding: 5px 8px; border-radius: 999px; font-weight: 800; font-size: 13px; }
.diff-good { color: #55d187; background: rgba(85, 209, 135, .10); border: 1px solid rgba(85, 209, 135, .35); }
.diff-bad { color: #ff7676; background: rgba(255, 118, 118, .10); border: 1px solid rgba(255, 118, 118, .35); }
.diff-neutral { color: #b7bec9; background: rgba(183, 190, 201, .07); border: 1px solid #3b424e; }
.quick-note { margin-top: 13px; color: #8f97a5; font-size: 12px; line-height: 1.45; }
.key-talents-card { margin-top: 18px; padding: 13px 15px; border: 1px solid #384555; background: #111720; border-radius: 10px; }
.key-talents-card.good { border-color: #285c43; background: rgba(35,104,69,.08); }
.key-talents-card.warning { border-color: #80651e; background: rgba(240,180,41,.06); }
.key-talents-card.unknown { border-color: #394454; }
.key-talents-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.key-talents-title { font-weight:900; font-size:15px; color:#f1f4f8; }
.key-talents-status { font-weight:850; font-size:13px; }
.key-talents-card.good .key-talents-status { color:#69dc9a; }
.key-talents-card.warning .key-talents-status { color:#ffd06a; }
.key-talents-card.unknown .key-talents-status { color:#aeb8c7; }
.key-talents-list { display:grid; gap:7px; margin-top:10px; }
.key-talent-issue { padding:8px 10px; border-radius:8px; border:1px solid #4b3f25; background:#171710; font-size:12px; line-height:1.45; }
.key-talent-target { color:#ffd06a; font-weight:900; }
.key-talent-current { color:#b6c0cd; margin-top:2px; }
.key-talents-note { margin-top:8px; color:#7f8b9a; font-size:11px; line-height:1.4; }
.healer-info-banner { margin-top: 16px; padding: 13px 15px; border-radius: 9px; border: 1px solid #33404c; background: #111820; color: #c5ccd6; line-height: 1.45; }
.healer-info-banner strong { color: #7cc7ff; }
.healer-dps-hint { position: relative; margin-top: 12px; width: fit-content; max-width: 100%; display: inline-flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; border: 1px solid #6b5730; background: rgba(240, 180, 41, .07); color: #d8dde5; font-size: 13px; overflow: visible; }
.healer-dps-hint > span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.healer-dps-hint strong { color: #f0b429; }
.healer-dps-hint .cycle-info-wrap { position: static; }
.healer-dps-hint .cycle-info-tooltip { left: 0; right: auto; top: calc(100% + 8px); width: min(430px, calc(100vw - 48px)); max-width: 430px; }
.healer-dps-tooltip { width: min(430px, calc(100vw - 48px)); }
.healer-dps-tooltip-title { margin-top: 10px; padding-top: 9px; border-top: 1px solid #303744; font-weight: 700; color: #fff; }
.healer-dps-tooltip-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.healer-dps-spell-icon { width: 24px; height: 24px; border-radius: 4px; border: 1px solid #3d4653; flex-shrink: 0; }
.healer-dps-tooltip-note { margin-top: 10px; color: #97a0ae; font-size: 12px; }
.usage-badge { display: inline-block; min-width: 88px; text-align: center; padding: 5px 8px; border-radius: 999px; font-weight: 800; font-size: 13px; }
.usage-close { color: #c1c7d0; background: rgba(183, 190, 201, .07); border: 1px solid #3b424e; }
.usage-more { color: #71b9ff; background: rgba(113, 185, 255, .10); border: 1px solid rgba(113, 185, 255, .35); }
.usage-less { color: #f0b429; background: rgba(240, 180, 41, .10); border: 1px solid rgba(240, 180, 41, .35); }
.usage-only { color: #b99cff; background: rgba(185, 156, 255, .10); border: 1px solid rgba(185, 156, 255, .35); }
.quick-section-title { margin: 22px 0 0; font-size: 17px; }
.example-table { min-width: 0; }

@media (max-width: 760px) {
    .quick-stats { grid-template-columns: 1fr; }
    .quick-table { min-width: 690px; }
}



/* Choix secondaires sous l'analyse joueur */
.analysis-or { margin: 15px 0 10px; text-align: center; color: #687484; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.raid-audit-entry { margin-top: 0; padding: 13px 15px; border: 1px solid #303b48; background: #11161d; border-radius: 9px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.raid-audit-entry-copy { min-width: 0; }
.raid-audit-entry-title { font-size: 15px; font-weight: 800; color: #d8dee8; }
.raid-audit-entry-text { margin-top: 3px; color: #8f9aa8; line-height: 1.35; font-size: 12px; }
.raid-audit-button { width: auto; min-width: 190px; margin: 0; padding: 9px 13px; background: transparent; color: #a9c8ff; border: 1px solid #465f88; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.raid-audit-button:hover { background: rgba(108, 153, 224, .09); border-color: #6c99e0; color: #d5e4ff; }
@media (max-width: 760px) {
    .raid-audit-entry { align-items: stretch; flex-direction: column; }
    .raid-audit-button { width: 100%; min-width: 0; }
}

/* Analyse globale du raid */
.raid-audit-box { margin-top: 18px; padding: 20px; border-radius: 11px; border: 1px solid #465a76; background: #0f151c; }
.raid-analysis-panel { display: none; padding-top: 12px; }
.raid-analysis-panel.active { display: block; }
.raid-consumable-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .raid-consumable-grid { grid-template-columns: 1fr; } }
.raid-audit-title { font-size: 22px; font-weight: 850; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.raid-audit-legend { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 50%; border: 1px solid #53657c; background: #151d27; color: #aebdce; font-size: 12px; font-weight: 900; line-height: 1; cursor: help; outline: none; user-select: none; }
.raid-audit-legend:hover, .raid-audit-legend:focus { border-color: #7c93af; color: #ffffff; background: #1b2633; }
.raid-audit-legend-tooltip { position: absolute; z-index: 80; top: calc(100% + 10px); left: 50%; width: 315px; max-width: min(315px, calc(100vw - 38px)); padding: 12px 13px; border-radius: 9px; border: 1px solid #46576c; background: #0b1118; box-shadow: 0 14px 35px rgba(0,0,0,.42); color: #dbe3ec; font-size: 12px; font-weight: 600; line-height: 1.55; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -4px); transition: opacity .14s ease, transform .14s ease, visibility .14s ease; }
.raid-audit-legend:hover .raid-audit-legend-tooltip, .raid-audit-legend:focus .raid-audit-legend-tooltip, .raid-audit-legend:focus-within .raid-audit-legend-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.raid-audit-legend-heading { margin-bottom: 6px; color: #ffffff; font-weight: 900; }
.raid-audit-legend-row { display: flex; gap: 7px; align-items: flex-start; padding: 2px 0; white-space: normal; }
@media (max-width: 620px) { .raid-audit-legend-tooltip { left: 0; transform: translate(0, -4px); } .raid-audit-legend:hover .raid-audit-legend-tooltip, .raid-audit-legend:focus .raid-audit-legend-tooltip, .raid-audit-legend:focus-within .raid-audit-legend-tooltip { transform: translate(0, 0); } }
.raid-audit-meta { margin-top: 6px; color: #aeb7c4; line-height: 1.45; }
.raid-audit-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 17px; }
.raid-audit-stat { padding: 13px; border-radius: 9px; border: 1px solid #303b48; background: #121923; }
.raid-audit-stat-label { color: #9eabb9; font-size: 12px; }
.raid-audit-stat-value { margin-top: 4px; font-size: 20px; font-weight: 900; }
.raid-audit-stat.bad .raid-audit-stat-value { color: #ff7676; }
.raid-audit-stat.warn .raid-audit-stat-value { color: #ffb86b; }
.raid-audit-stat.good .raid-audit-stat-value { color: #55d187; }
.raid-wipe-cause { margin-top: 16px; padding: 15px 16px; border-radius: 10px; border: 1px solid #7a4a58; background: #191219; }
.raid-wipe-cause-title { font-size: 17px; font-weight: 900; color: #ff9cac; }
.raid-wipe-cause-headline { margin-top: 7px; font-size: 15px; font-weight: 850; }
.raid-wipe-cause-meta { margin-top: 6px; color: #c3aeb5; font-size: 12px; line-height: 1.5; }
.raid-wipe-cause-reading { margin-top: 9px; padding-top: 8px; border-top: 1px solid #4a3039; color: #d3c5ca; font-size: 12px; line-height: 1.5; }
.raid-wipe-boss-rules { margin-top: 11px; display: grid; gap: 7px; }
.raid-wipe-boss-rule { padding: 9px 11px; border-radius: 8px; border: 1px solid #765b26; background: rgba(240,180,41,.06); }
.raid-wipe-boss-rule-title { color: #f6c653; font-size: 12px; font-weight: 900; }
.raid-wipe-boss-rule-text { margin-top: 3px; color: #d6c8a8; font-size: 11px; line-height: 1.45; }
.raid-wipe-rule-inline { margin-top: 5px; color: #e9c66d; font-size: 10px; line-height: 1.35; }
.raid-wipe-cause-note { margin-top: 7px; color: #907d84; font-size: 11px; line-height: 1.4; }
.raid-wipe-deaths-title { margin-top: 13px; color: #f4dce3; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.raid-wipe-death-grid { margin-top: 8px; display: grid; gap: 7px; }
.raid-wipe-death-head, .raid-wipe-death-row { display: grid; grid-template-columns: minmax(175px, .8fr) minmax(260px, 1.35fr) minmax(190px, .85fr); gap: 12px; align-items: center; }
.raid-wipe-death-head { padding: 0 11px; color: #8f7b82; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.raid-wipe-death-row { min-height: 48px; padding: 9px 11px; border: 1px solid #553642; border-radius: 8px; background: rgba(8,12,17,.42); }
.raid-wipe-death-row.first { border-color: #87485a; background: rgba(110,32,53,.08); }
.raid-wipe-death-player { min-width: 0; color: #fff; font-weight: 850; }
.raid-wipe-death-time { color: #ff8ca0; font-weight: 900; white-space: nowrap; margin-left: 5px; }
.raid-wipe-death-spell { min-width: 0; color: #cfd7e3; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.raid-wipe-death-nature { min-width: 0; }
.raid-wipe-nature-badge { display: inline-flex; align-items: center; max-width: 100%; padding: 4px 8px; border-radius: 999px; border: 1px solid #6a4c2a; background: rgba(240,180,41,.08); color: #ffd27a; font-size: 11px; font-weight: 850; line-height: 1.2; }
.raid-wipe-cause-simple .raid-wipe-cause-title { color: #ffffff; }
.raid-wipe-simple-signal { margin-top: 10px; padding: 9px 11px; border: 1px solid #3c4654; border-radius: 8px; background: #111821; color: #dbe4ef; font-size: 12px; }
.raid-wipe-simple-legend { margin-top: 11px; color: #9aa6b5; font-size: 11px; line-height: 1.5; }
.raid-wipe-nature-badge.simple-soak { border-color: #8a5c22; background: rgba(255,166,61,.10); color: #ffc168; }
.raid-wipe-nature-badge.simple-dot { border-color: #6650a6; background: rgba(153,112,255,.10); color: #c6a7ff; }
.raid-wipe-nature-badge.simple-normal { border-color: #426d9a; background: rgba(92,169,255,.10); color: #8cc7ff; }
.raid-wipe-nature-badge.simple-slack { border-color: #8d414b; background: rgba(255,91,109,.10); color: #ff9aa6; }
.raid-wipe-nature-badge.simple-unknown { border-color: #525c68; background: rgba(150,160,175,.08); color: #b9c2ce; }
.raid-wipe-school { margin-top: 4px; color: #9b8c91; font-size: 10px; }
@media (max-width: 820px) {
  .raid-wipe-death-head { display: none; }
  .raid-wipe-death-row { grid-template-columns: 1fr; gap: 6px; }
  .raid-wipe-death-nature { padding-left: 0; }
}
.raid-audit-priority { margin-top: 18px; padding: 16px; border-radius: 10px; border: 1px solid #40506a; background: #121a24; }
.raid-audit-priority-title { font-size: 18px; font-weight: 850; }
.raid-audit-priority-sub { margin-top: 4px; color: #99a5b3; font-size: 12px; line-height: 1.4; }
.raid-audit-rows { display: grid; gap: 9px; margin-top: 12px; }
.raid-audit-row { padding: 11px 12px; border-radius: 8px; border: 1px solid #303b48; background: #0f151c; line-height: 1.4; }
.raid-audit-row.danger { border-left: 4px solid #ff7676; }
.raid-audit-row.warn { border-left: 4px solid #ffb86b; }
.raid-audit-row.info { border-left: 4px solid #6c99e0; }
.raid-audit-row-main { font-weight: 800; }
.raid-audit-row-meta { margin-top: 3px; color: #a7b0bd; font-size: 12px; }
.raid-death-cause-line { margin-top: 7px; color: #cfd7e3; font-size: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.raid-death-cause-wrap { position: relative; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; color: #ffd27a; font-weight: 800; cursor: help; }
.raid-death-cause-wrap:hover .raid-death-cause-name, .raid-death-cause-wrap:focus-within .raid-death-cause-name { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.raid-death-cause-icon { width: 21px; height: 21px; border-radius: 4px; border: 1px solid #46515f; object-fit: cover; flex: 0 0 auto; }
.raid-death-type-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; border: 1px solid #4a5666; background: #151d27; color: #d8e0ea; font-size: 11px; font-weight: 750; }
.raid-death-info-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; border: 1px solid #80651e; background: rgba(240,180,41,.08); color: #f0b429; font-size: 11px; font-weight: 850; }
.raid-death-cause-tooltip { display: none; position: absolute; left: 0; top: calc(100% + 9px); z-index: 120; width: min(520px, 82vw); padding: 14px 15px; border-radius: 10px; border: 1px solid #4b5667; background: #0b1016; box-shadow: 0 14px 34px rgba(0,0,0,.55); color: #d7dde7; font-size: 12px; line-height: 1.5; font-weight: 400; }
.raid-death-cause-wrap:hover .raid-death-cause-tooltip, .raid-death-cause-wrap:focus-within .raid-death-cause-tooltip { display: block; }
.raid-death-cause-tooltip strong { color: #fff; }
.raid-death-tooltip-title { font-size: 13px; font-weight: 900; color: #fff; margin-bottom: 7px; }
.raid-death-tooltip-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin-top: 7px; }
.raid-death-tooltip-key { color: #8e99a8; }
.raid-death-tooltip-value { color: #e1e7ef; }
.raid-death-tooltip-note { margin-top: 9px; padding-top: 8px; border-top: 1px solid #2e3947; color: #aeb8c5; }
.raid-death-timeline { margin-top: 9px; padding-top: 8px; border-top: 1px solid #2e3947; }
.raid-death-timeline-title { color: #fff; font-weight: 850; margin-bottom: 4px; }
.raid-death-timeline-row { display: flex; gap: 7px; align-items: center; color: #bdc7d3; margin-top: 3px; }
.raid-death-timeline-dot { color: #8e99a8; min-width: 34px; }
.raid-audit-names { margin-top: 5px; color: #d0d7e2; font-size: 13px; }
.raid-audit-detail { margin-top: 16px; }
.raid-audit-detail summary { cursor: pointer; padding: 12px 14px; border-radius: 8px; border: 1px solid #3a4658; background: #121923; color: #f0b429; font-weight: 850; }
.raid-audit-table-wrap { overflow-x: auto; margin-top: 12px; }
.raid-audit-table { width: 100%; border-collapse: collapse; min-width: 780px; }
.raid-audit-table th, .raid-audit-table td { padding: 10px 9px; text-align: left; border-bottom: 1px solid #2c3541; }
.raid-audit-table th { color: #9fa9b7; font-size: 12px; }
.raid-audit-ok { color: #55d187; font-weight: 800; }
.raid-audit-miss { color: #ff8a8a; font-weight: 800; }
.raid-audit-muted { color: #7f8997; }
.raid-audit-note { margin-top: 13px; color: #8e99a8; font-size: 12px; line-height: 1.45; }
@media (max-width: 900px) {
    .raid-audit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.individual-summary {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #394455;
    border-radius: 10px;
    background: #121821;
}
.individual-summary-title {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 5px;
}
.individual-summary-subtitle {
    color: #98a5b7;
    font-size: 12px;
    margin-bottom: 12px;
}
.individual-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
.individual-summary-item {
    min-height: 52px;
    padding: 11px 12px;
    border: 1px solid #2f3947;
    border-radius: 8px;
    background: #0f151d;
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
}
.individual-summary-item.good { border-color: #2e684a; }
.individual-summary-item.warning { border-color: #7a5a23; }
.individual-summary-item.unknown { border-color: #46505f; color: #aab3c1; }
.individual-summary-info {
    position: relative;
    margin-left: auto;
}
.individual-summary-info-button {
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid #7e6725;
    background: transparent;
    color: #f0b429;
    font-weight: 900;
    line-height: 22px;
}
.individual-summary-info-tooltip {
    display: none;
    position: absolute;
    right: 0;
    top: 30px;
    z-index: 60;
    width: min(420px, 80vw);
    padding: 12px 14px;
    border: 1px solid #4a5566;
    border-radius: 8px;
    background: #0c1118;
    color: #dce2ea;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 500;
    box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.individual-summary-info:hover .individual-summary-info-tooltip,
.individual-summary-info:focus-within .individual-summary-info-tooltip {
    display: block;
}
@media (max-width: 760px) {
    .individual-summary-grid { grid-template-columns: 1fr; }
}

.analysis-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 8, 13, .78);
    backdrop-filter: blur(3px);
}
.analysis-loading-overlay.active { display: flex; }
.analysis-loading-card {
    width: min(460px, 92vw);
    padding: 28px 30px;
    text-align: center;
    background: #141820;
    border: 1px solid #f0b429;
    border-radius: 14px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .45);
}
.analysis-loading-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 4px solid #343b48;
    border-top-color: #f0b429;
    animation: analyzer-spin .85s linear infinite;
}
.analysis-loading-title { font-size: 20px; font-weight: 800; color: #fff; }
.analysis-loading-text { margin-top: 8px; color: #aeb6c4; line-height: 1.45; font-size: 14px; }
body.analysis-busy { overflow: hidden; }
button:disabled { cursor: wait; opacity: .65; }
@keyframes analyzer-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
    .raid-audit-stats { grid-template-columns: 1fr; }
}


.opener-trinket-zone {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #2b3440;
}
.opener-trinket-zone-title { margin-bottom: 8px; }
.opener-trinket-card {
    border: 1px solid #313b48;
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 8px;
    background: rgba(15, 20, 27, 0.7);
}
.opener-trinket-card.good { border-color: rgba(79, 190, 125, 0.45); }
.opener-trinket-card.warning { border-color: rgba(241, 179, 61, 0.55); }
.opener-trinket-card.info { border-color: #313b48; }
.opener-trinket-head {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 5px;
}
.opener-trinket-name { display: inline-flex; align-items: center; gap: 7px; }
.opener-trinket-icon { width: 22px; height: 22px; border-radius: 4px; }
.opener-trinket-status { font-size: 0.88rem; }
.opener-trinket-placement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: 0.9rem;
}
.opener-trinket-separator { color: #697586; }
.opener-trinket-summary {
    margin-top: 8px;
    padding: 9px 10px;
    border-radius: 8px;
    background: #111821;
    border: 1px solid #2d3948;
    color: #d6dde7;
    line-height: 1.45;
}
.opener-trinket-when {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #2a3440;
}
.opener-trinket-when-title {
    color: #eef2f7;
    font-weight: 850;
    margin-bottom: 7px;
}
.opener-trinket-when-sub {
    color: #8f9aa8;
    font-size: 12px;
    font-weight: 500;
}
.opener-trinket-option-list {
    display: grid;
    gap: 6px;
}
.opener-trinket-option {
    display: grid;
    grid-template-columns: 28px minmax(260px, 1fr) auto auto;
    gap: 9px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    background: #0f151d;
    border: 1px solid #283340;
}
.opener-trinket-option-rank {
    color: #f0b429;
    font-weight: 900;
}
.opener-trinket-option-time {
    color: #72c7ff;
    font-weight: 800;
    white-space: nowrap;
}
.opener-trinket-option-count {
    color: #aab4c2;
    font-size: 12px;
    white-space: nowrap;
}
.opener-trinket-mine {
    margin-top: 10px;
    padding: 10px 11px;
    border-radius: 8px;
    background: rgba(92, 133, 214, .07);
    border: 1px solid #3b4c67;
    line-height: 1.45;
}
.opener-trinket-mine-note {
    margin-top: 4px;
    color: #97a5b7;
    font-size: 12px;
}
@media (max-width: 760px) {
    .opener-trinket-option { grid-template-columns: 28px 1fr; }
    .opener-trinket-option-time, .opener-trinket-option-count { grid-column: 2; }
}


/* Timeline visuelle BETA — vue fenêtre courte type Warcraft Logs */
.beta-timeline { margin-top:2px; }
.beta-timeline-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.beta-timeline-title { font-size:20px; font-weight:900; }
.beta-timeline-sub { margin-top:4px; color:#9ca9b9; font-size:12px; line-height:1.4; }
.beta-timeline-legend { display:flex; gap:12px; flex-wrap:wrap; color:#cbd3de; font-size:12px; }
.beta-timeline-legend-item { display:inline-flex; align-items:center; gap:5px; }
.beta-timeline-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.beta-timeline-dot.ref { background:#f0b429; }
.beta-timeline-dot.mine { background:#4ea1ff; }
.beta-timeline-controls { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 8px; }
.beta-timeline-filter-group, .beta-timeline-window-group, .beta-timeline-nav-group { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.beta-timeline-filter, .beta-timeline-window-button, .beta-timeline-nav { width:auto; margin:0; padding:6px 9px; border-radius:3px; border:1px solid #39434e; background:#151a20; color:#cbd3dd; font-size:11px; font-weight:800; }
.beta-timeline-filter.active, .beta-timeline-window-button.active { color:#fff; border-color:#718ca8; background:#26384a; }
.beta-timeline-nav:disabled { opacity:.4; cursor:default; }
.beta-timeline-window-label { min-width:105px; text-align:center; color:#fff; font-size:12px; font-weight:900; }
.beta-timeline-range-wrap { display:grid; grid-template-columns:75px 1fr 75px; gap:8px; align-items:center; margin:7px 0 10px; color:#8f9cab; font-size:10px; }
.beta-timeline-range { width:100%; accent-color:#f0b429; }
.beta-timeline-scroll { overflow-x:hidden; border:1px solid #313942; border-radius:2px; background:#050709; }
.beta-timeline-canvas { width:100%; min-width:760px; background:#050709; }
.beta-timeline-ruler { display:grid; grid-template-columns:220px 1fr; min-height:38px; background:#080b0f; border-bottom:1px solid #525860; }
.beta-timeline-ruler-label { padding:11px 10px; color:#b9c5d2; font-size:11px; font-weight:800; border-right:1px solid #41474f; }
.beta-timeline-ruler-track { position:relative; min-height:38px; }
.beta-timeline-tick { position:absolute; top:0; bottom:0; width:1px; background:#555d66; pointer-events:none; }
.beta-timeline-tick.minor { background:#232a31; height:8px; top:auto; bottom:0; }
.beta-timeline-tick strong { position:absolute; top:7px; left:4px; white-space:nowrap; color:#fff; font-size:10px; font-weight:800; }
.beta-timeline-row { display:grid; grid-template-columns:220px 1fr; min-height:52px; border-bottom:1px solid #353a40; }
.beta-timeline-row:last-child { border-bottom:0; }
.beta-timeline-spell { padding:5px 8px; border-right:1px solid #41474f; display:flex; align-items:center; gap:7px; min-width:0; background:#080b0f; }
.beta-timeline-spell img { width:25px; height:25px; border:1px solid #4c535b; flex:0 0 auto; }
.beta-timeline-spell-copy { min-width:0; }
.beta-timeline-spell-name { color:#fff; font-size:12px; font-weight:850; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.beta-timeline-spell-count { margin-top:2px; color:#8d98a5; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.beta-timeline-track { position:relative; min-height:52px; background:#050709; }
.beta-timeline-track::after { content:""; position:absolute; left:0; right:0; top:25px; height:1px; background:#2d3238; }
.beta-timeline-lane-label { position:absolute; left:4px; z-index:4; font-size:8px; font-weight:900; pointer-events:none; }
.beta-timeline-lane-label.ref { top:3px; color:#ddb331; }
.beta-timeline-lane-label.mine { top:29px; color:#67afff; }
.beta-timeline-gridline { position:absolute; top:0; bottom:0; width:1px; background:#1f252b; pointer-events:none; }
.beta-timeline-gcd { position:absolute; height:17px; z-index:1; box-sizing:border-box; pointer-events:none; opacity:.34; border-radius:1px; }
.beta-timeline-gcd.ref { top:7px; background:#d7bd72; border:1px solid rgba(246,219,142,.42); }
.beta-timeline-gcd.mine { top:33px; background:#74bee9; border:1px solid rgba(151,215,255,.42); }
.beta-timeline-event { position:absolute; height:17px; min-width:5px; border-radius:1px; z-index:3; cursor:default; box-sizing:border-box; }
.beta-timeline-event.ref { top:7px; background:#e9b52b; border:1px solid #ffd35e; }
.beta-timeline-event.mine { top:33px; background:#43a0fb; border:1px solid #8dccff; }
.beta-timeline-event.instant { width:6px !important; transform:translateX(-3px); z-index:4; }
.beta-timeline-event.prepull { border-left:3px solid #fff1a8; }
.beta-timeline-empty { padding:18px; border:1px solid #303a47; color:#9ea9b7; background:#111720; }
@media (max-width:760px) {
  .beta-timeline-ruler, .beta-timeline-row { grid-template-columns:155px 1fr; }
  .beta-timeline-canvas { min-width:700px; }
  .beta-timeline-range-wrap { grid-template-columns:55px 1fr 55px; }
}

/* Dashboard 5 onglets */
.analysis-tabs { flex-wrap: wrap; gap: 8px; }
.analysis-tab-button { white-space: nowrap; }
.analysis-tab-panel { padding-top: 18px; }

/* V2 — opener : sorts clés / sorts variables */
.opener-sequence-chip.variable { opacity: .5; }
.opener-sequence-chip.problem { border-color: #e5534b; box-shadow: 0 0 0 1px #e5534b inset; }
.opener-issue { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(229,83,75,.08); border: 1px solid rgba(229,83,75,.35); }
.opener-info { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #11161d; border: 1px solid #2a333f; color: #c9d1dc; }
.opener-legend { margin-top: 10px; line-height: 1.9; }

/* V2 — talents en arbre (bleu = toi, jaune = référence, comme la Timeline) */
.talents-v2 { margin-top: 22px; padding: 20px; border: 1px solid #343d49; background: #151922; border-radius: 12px; }
.talents-v2-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.talents-v2-title { font-size: 17px; font-weight: 800; }
.talents-v2-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
.talents-v2-mode { margin-top: 0; padding: 7px 12px; background: #1d232d; color: #c9d1dc; border: 1px solid #343d49; font-weight: 700; }
.talents-v2-mode.active { background: #f0b429; color: #111; border-color: #f0b429; }
.talents-v2-headline { margin: 14px 0 8px; font-weight: 800; }
.talents-v2-headline.ok { color: #55d187; }
.talents-v2-headline.warn { color: #ffb86b; }
.talents-v2-line { padding: 5px 0; border-bottom: 1px solid #222935; line-height: 1.8; }
.talents-v2-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 4px; color: #9da5b4; font-size: 12px; }
.talent-dot { display: inline-block; width: 12px; height: 12px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; border: 2px solid #8b95a5; }
.talent-dot.player_only { border-color: #43a0fb; background: rgba(67,160,251,.35); }
.talent-dot.refs_only { border-color: #f0b429; border-style: dashed; }
.talent-dot.choice_diff { border-color: #ff8c42; background: rgba(255,140,66,.3); }
.talent-dot.none { border-color: #3a414d; background: #1a1f27; }
.talent-trees { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 14px; }
.talent-section-title { margin-bottom: 8px; color: #9da5b4; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.talent-grid { position: relative; }
.talent-node { position: absolute; width: 30px; height: 30px; border-radius: 7px; border: 2px solid #8b95a5; background: #0f1117; box-sizing: border-box; }
.talent-node.choice { border-radius: 50%; }
.talent-node-icon { width: 100%; height: 100%; border-radius: inherit; display: block; }
.talent-node.empty .talent-node-icon { filter: grayscale(1); opacity: .28; }
.talent-node.none { border-color: #2c333e; }
.talent-node.player_only { border-color: #43a0fb; box-shadow: 0 0 0 2px rgba(67,160,251,.45); }
.talent-node.refs_only { border-color: #f0b429; border-style: dashed; box-shadow: 0 0 0 2px rgba(240,180,41,.35); }
.talent-node.refs_only .talent-node-icon { opacity: .7; filter: none; }
.talent-node.choice_diff, .talent-node.rank_diff { border-color: #ff8c42; box-shadow: 0 0 0 2px rgba(255,140,66,.4); }
.talent-node-alt { position: absolute; right: -7px; bottom: -7px; width: 15px; height: 15px; border-radius: 4px; border: 1px solid #f0b429; }
.talent-rank { position: absolute; left: -4px; bottom: -8px; padding: 0 3px; border-radius: 4px; background: #0f1117; color: #c9d1dc; font-size: 9px; font-weight: 800; line-height: 13px; }

/* V2 — onglet Rotation */
.rot-finding { margin-top: 8px; padding: 9px 12px; border-radius: 8px; border: 1px solid #2a333f; background: #11161d; }
.rot-finding.high { border-color: rgba(229,83,75,.45); background: rgba(229,83,75,.07); }
.rot-finding.medium { border-color: rgba(255,184,107,.4); background: rgba(255,184,107,.06); }
.rot-finding.low { border-color: rgba(67,160,251,.35); }
.rot-finding.ok { color: #55d187; font-weight: 700; }
.rot-finding-title { display: flex; align-items: center; gap: 6px; }
.rot-finding-evidence { margin-top: 3px; color: #9da5b4; font-size: 13px; }
.status-variable, .status-uncommon, .status-close { color: #9da5b4; }
.rot-dead-note { margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: #11161d; border: 1px solid #2a333f; }

/* V2 — talents : arbre lisible, différences mises en avant, résumé compact */
.talents-v2-headline { margin: 14px 0 8px; font-size: 15px; font-weight: 850; }
.talents-v2-headline.warn { color: #ffb86b; }
.talents-v2-headline.ok { color: #55d187; }
.talent-summary { display: grid; gap: 6px; margin-bottom: 8px; }
.talent-sum-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.talent-sum-label { color: #c9d1dc; font-weight: 700; margin-right: 2px; }
.talent-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; border-radius: 999px; background: #1a2029; border: 1px solid #313a47; font-weight: 700; font-size: 13px; }
.talent-chip-icon { width: 20px; height: 20px; border-radius: 50%; }
.talent-chip-detail { color: #9da5b4; font-weight: 600; font-size: 12px; }
.talent-chip-arrow { color: #ff8c42; font-weight: 900; }
.talent-tag-demo { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 900; line-height: 18px; color: #0f1117; }
.talent-tag-demo.player_only, .talent-tag.player_only { background: #43a0fb; }
.talent-tag-demo.refs_only, .talent-tag.refs_only { background: #f0b429; }
.talent-tag-demo.choice_diff, .talent-tag.choice_diff, .talent-tag.rank_diff { background: #ff8c42; }
.talent-trees { gap: 34px; padding-top: 10px; }
.talent-node { width: 40px; height: 40px; border-radius: 9px; }
.talent-rank { font-size: 10px; line-height: 14px; bottom: -9px; }
.talent-node-alt { width: 18px; height: 18px; right: -8px; bottom: -8px; }
.talent-tag { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); padding: 0 4px; border-radius: 4px; font-size: 10px; font-weight: 900; line-height: 14px; color: #0f1117; white-space: nowrap; z-index: 3; }
.talent-node.mine { border-color: #9aa4b4; }
.talent-node.is-diff { z-index: 2; border-width: 3px; transform: scale(1.12); }
.talent-node.is-diff .talent-node-icon { opacity: 1; filter: none; }
.talent-node.player_only.is-diff { border-color: #43a0fb; box-shadow: 0 0 0 2px rgba(67,160,251,.6), 0 0 14px rgba(67,160,251,.75); }
.talent-node.refs_only.is-diff { border-color: #f0b429; border-style: solid; box-shadow: 0 0 0 2px rgba(240,180,41,.6), 0 0 14px rgba(240,180,41,.75); }
.talent-node.choice_diff.is-diff, .talent-node.rank_diff.is-diff { border-color: #ff8c42; box-shadow: 0 0 0 2px rgba(255,140,66,.6), 0 0 14px rgba(255,140,66,.75); }

/* V2 — Analyser le raid : cartes de mort */
.raid-death-v2 { padding: 12px 14px; border-radius: 10px; background: #11161d; border: 1px solid #2a333f; border-left: 4px solid #e5534b; }
.raid-death-v2-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 10px; }
.raid-death-v2-time { color: #ff9b95; font-weight: 800; white-space: nowrap; }
.raid-death-v2-grid { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; align-items: center; }
.raid-death-v2-label { color: #8b95a5; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.raid-death-v2-icon { width: 22px; height: 22px; border-radius: 4px; vertical-align: -6px; margin-right: 6px; }
.raid-death-v2-defs { display: flex; flex-wrap: wrap; gap: 14px; }
.raid-death-v2-def { display: flex; align-items: center; gap: 10px; }
.raid-death-v2-def-icon { width: 36px; height: 36px; border-radius: 7px; border: 2px solid #55d187; box-shadow: 0 0 10px rgba(85,209,135,.35); }
.raid-death-v2-sub { color: #9da5b4; font-size: 13px; margin-top: 2px; }
.raid-death-v2-sub .inline-spell-icon { width: 16px; height: 16px; vertical-align: -3px; margin: 0 3px; }
.raid-death-v2-muted { color: #8b95a5; font-weight: 400; }
.raid-death-v2-chip { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #1a2029; border: 1px solid #313a47; }
.raid-death-v2-chip.bad { color: #ff9b95; border-color: rgba(229,83,75,.45); }
.raid-death-v2-chip.ok { color: #7ee2a8; }
.raid-death-v2-timeline { margin-top: 10px; }
.raid-death-v2-timeline summary { cursor: pointer; color: #9da5b4; font-size: 13px; }
.raid-death-v2-cares { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.raid-death-v2-care { font-size: 14px; }
.raid-death-v2-care.used strong { color: #e6e9ef; }
.raid-death-v2-care.bad { color: #ff9b95; }

/* V2 — « Pourquoi il est mort » */
.death-v2 { padding: 12px 14px; border-radius: 10px; background: #11161d; border: 1px solid #2a333f; border-left: 5px solid #6f7887; }
.death-v2.avoidable { border-left-color: #e5534b; }
.death-v2.strategy { border-left-color: #ff8c42; }
.death-v2.mechanic { border-left-color: #f0b429; }
.death-v2.tank { border-left-color: #a371f7; }
.death-v2.raid { border-left-color: #43a0fb; }
.death-v2-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 16px; }
.death-v2-head .raid-death-v2-time { margin-left: auto; }
.death-v2-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 850; border: 1px solid #3a414d; background: #1a2029; white-space: nowrap; }
.death-v2-chip.avoidable { color: #ff9b95; border-color: rgba(229,83,75,.6); background: rgba(229,83,75,.12); }
.death-v2-chip.strategy { color: #ffb86b; border-color: rgba(255,140,66,.6); background: rgba(255,140,66,.12); }
.death-v2-chip.mechanic { color: #ffd56a; border-color: rgba(240,180,41,.5); background: rgba(240,180,41,.10); }
.death-v2-chip.tank { color: #c9a7ff; border-color: rgba(163,113,247,.5); background: rgba(163,113,247,.10); }
.death-v2-chip.raid { color: #8dccff; border-color: rgba(67,160,251,.5); background: rgba(67,160,251,.10); }
.death-v2-chip.unknown { color: #c9d1dc; }
.death-v2-headline { margin-top: 8px; font-size: 15px; font-weight: 800; }
.death-v2-why { margin-top: 4px; color: #c9d1dc; font-size: 14px; }
.death-v2-names { margin-top: 8px; line-height: 1.8; }
.death-v2-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
.death-v2-row .raid-death-v2-label { min-width: 120px; }
.death-v2-defs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.death-v2-def { display: inline-flex; align-items: center; gap: 8px; }
.death-v2-hits { margin-top: 10px; display: grid; gap: 6px; }
.death-v2-hit { padding: 6px 8px; border-radius: 8px; background: #0f1117; }
.death-v2-hit .death-v2-chip { margin-left: 6px; font-size: 11px; }

/* V2 — arbres de talents côte à côte, redimensionnés à la largeur disponible */
.talent-trees { display: grid !important; flex-wrap: nowrap; gap: 0; width: 100%; padding-top: 16px; }
.talent-section { min-width: 0; }
.talent-grid { position: relative; width: 100%; height: auto !important; }
.talent-node { position: absolute; height: auto !important; aspect-ratio: 1; }
.talent-section-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }