/* =====================================================================
   SHUJAA ESPADA v2 — la grande toile (toile.js)
   ===================================================================== */
#toile { max-width: 1600px; }
.toile-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.toile-chips button {
  --pc: var(--gold-2);
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 800; color: var(--ink); background: rgba(243, 235, 224, 0.04); box-shadow: inset 0 0 0 1px var(--line);
}
.toile-chips button[data-p]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pc); }
.toile-chips button.avg::before { content: ""; width: 16px; border-top: 2px dashed #f3ebe0; }
.toile-chips button[aria-pressed="true"] { background: color-mix(in srgb, var(--pc) 22%, transparent); box-shadow: inset 0 0 0 1.5px var(--pc); }
.toile-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(20px, 3vw, 48px); align-items: start; }
.toile { width: 100%; height: auto; display: block; overflow: visible; touch-action: manipulation; }

/* bandes de niveau et repères */
.t-band { stroke: none; }
.t-band.b0 { fill: rgba(229, 88, 59, 0.05); }
.t-band.b1 { fill: rgba(232, 194, 90, 0.035); }
.t-band.b2 { fill: rgba(159, 211, 106, 0.035); }
.t-band.b3 { fill: rgba(79, 220, 154, 0.06); }
.t-ring { fill: none; stroke: rgba(243, 235, 224, 0.05); stroke-width: 1; }
.t-ring.major { stroke: rgba(243, 235, 224, 0.12); }
.t-grad { font-family: var(--mono); font-size: 13px; fill: var(--dim); }
.t-bandlb { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-anchor: middle; opacity: 0.75; }
.t-bandlb.b0 { fill: #e5583b; } .t-bandlb.b1 { fill: #e8c25a; } .t-bandlb.b2 { fill: #9fd36a; } .t-bandlb.b3 { fill: #4fdc9a; }

/* branches */
.t-axis { stroke: rgba(243, 235, 224, 0.16); stroke-width: 1.2; transition: stroke 0.25s, stroke-width 0.25s; }
.t-axis.on { stroke: var(--gold-2); stroke-width: 2.4; }
.t-hit { fill: transparent; cursor: pointer; }
.t-label .t-name { font-family: var(--sans); font-size: 25px; font-weight: 800; fill: var(--ink); transition: fill 0.25s; }
.t-label .t-sub { font-family: var(--mono); font-size: 15px; fill: var(--mute); }
.t-label .t-best { font-family: var(--sans); font-size: 15px; font-weight: 700; }
.t-label.on .t-name { fill: var(--gold-2); }

/* formes */
.t-avg { fill: rgba(243, 235, 224, 0.03); stroke: #f3ebe0; stroke-width: 2; stroke-dasharray: 8 7; opacity: 0.75; transition: opacity 0.3s; }
.t-avg.off { opacity: 0; }
.t-player polygon { fill: color-mix(in srgb, var(--pc) 10%, transparent); stroke: var(--pc); stroke-width: 2.4; stroke-linejoin: round; transition: opacity 0.3s, stroke-width 0.3s, fill 0.3s; }
.t-player circle { fill: var(--pc); stroke: #0b0607; stroke-width: 2.5; transition: opacity 0.3s; }
.t-player text { font-family: var(--mono); font-size: 14px; font-weight: 700; fill: var(--pc); text-anchor: middle; paint-order: stroke; stroke: #0b0607; stroke-width: 4; opacity: 0; transition: opacity 0.3s; }
.t-player.focus polygon { stroke-width: 4; fill: color-mix(in srgb, var(--pc) 22%, transparent); }
.t-player.focus text { opacity: 1; }
.t-player.dim polygon, .t-player.dim circle { opacity: 0.18; }
.t-player.off { display: none; }
.t-core { fill: #c4314b; }

/* panneau d'explication */
.toile-panel { position: sticky; top: calc(var(--nav-h) + 24px); padding: 26px; border-radius: 22px; min-height: 420px; background: linear-gradient(165deg, rgba(30, 15, 18, 0.92), rgba(12, 7, 8, 0.95)); box-shadow: inset 0 0 0 1px var(--line); }
.tp-kicker { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.toile-panel h3 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; }
.toile-panel h3 em { font-family: var(--serif); font-weight: 400; color: var(--gold-2); }
.tp-what { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--mute); }
.tp-what b { color: var(--ink); }
.tp-read { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tp-read li { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.5; color: var(--mute); }
.tp-read li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }
.tp-read b { color: var(--ink); }
.tp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.tp-facts span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.tp-facts b { display: block; margin-top: 4px; font-size: 17px; }
.tp-facts small { font-size: 12.5px; color: var(--mute); }
.tp-sub { margin: 20px 0 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.tp-rank { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tp-rank li { display: grid; grid-template-columns: 80px minmax(0, 1fr) 32px; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.tp-rank li span { color: var(--pc); }
.tp-rank i { position: relative; height: 8px; border-radius: 99px; background: rgba(243, 235, 224, 0.07); overflow: hidden; }
.tp-rank i::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--v)); background: var(--pc); border-radius: inherit; }
.tp-rank b { text-align: right; font-variant-numeric: tabular-nums; }
.tp-vs li { grid-template-columns: 76px minmax(0, 1fr) 30px 38px; }
.tp-vs em { font-style: normal; font-size: 12.5px; text-align: right; }
.tp-vs em.up { color: #8fdcb0; } .tp-vs em.down { color: #ffb9a6; }
.tp-note { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--mute); }
.tp-note b { color: var(--ink); }
.tp-levels { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tp-levels li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; color: var(--mute); }
.tp-levels li b { color: var(--ink); font-family: var(--mono); }
.tp-levels li.here { background: rgba(196, 49, 75, 0.12); box-shadow: inset 0 0 0 1px rgba(196, 49, 75, 0.35); color: var(--ink); }

@media (max-width: 1100px) { .toile-wrap { grid-template-columns: 1fr; } .toile-panel { position: static; min-height: 0; } }
.t-label .t-short { display: none; }
@media (max-width: 760px) {
  /* téléphone : nom court, en gros, sans les détails (ils sont dans le panneau) */
  .t-label .t-name, .t-label .t-sub, .t-label .t-best { display: none; }
  .t-label .t-short { display: block; font-family: var(--sans); font-size: 52px; font-weight: 800; fill: var(--ink); }
  .t-label.on .t-short { fill: var(--gold-2); }
  .t-bandlb, .t-grad { display: none; }
}