:root {
  --fond: #0f0a1a; --carte: #1c1430; --ligne: #352a52; --encre: #f2ecff; --doux: #a99bc8;
  --orange: #ff8a1f; --orange2: #ffb347; --vert: #6ee7a8; --rouge: #ff6b81; --violet: #a78bfa; --bleu: #5db1ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; hyphens: none; -webkit-hyphens: none; }
body { font-family: "Segoe UI", system-ui, Arial, sans-serif; color: var(--encre);
  background: radial-gradient(900px 500px at 85% -10%, #3a1d5e 0, transparent 60%), var(--fond); }
.page { max-width: 1400px; margin: 0 auto; padding: 18px 16px 30px; }
.barre { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kicker { color: var(--orange2); text-transform: uppercase; letter-spacing: 3px; font-weight: 700; font-size: 12px; }
h1 { margin: 4px 0 0; font-size: clamp(26px, 3.6vw, 40px); }
.etat { color: var(--doux); font-size: 14px; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin-bottom: 14px; }
.grille.haut { grid-template-columns: minmax(300px, 1fr) 2fr; }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; padding: 16px 18px; min-width: 0; }
.carte h2 { margin: 0 0 6px; font-size: 18px; }
.carte h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.3; }
.theme { color: var(--orange2); text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; font-weight: 700; }
.legende { color: var(--doux); font-size: 13px; margin: 4px 0 8px; }
.graphe { display: flex; justify-content: center; }
svg text { fill: var(--encre); font-family: inherit; }
.donut-centre { font-size: 26px; font-weight: 800; }
.donut-sous { font-size: 12px; fill: var(--doux); }
.leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; margin-top: 8px; }
.leg span { display: inline-flex; align-items: center; gap: 6px; }
.leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.pile { display: flex; height: 38px; border-radius: 10px; overflow: hidden; background: #120c20; margin: 8px 0; }
.pile div { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #120c20; min-width: 0; overflow: hidden; white-space: nowrap; transition: width .6s; }
.barres-etapes { display: grid; gap: 3px; align-items: end; height: 150px; margin-top: 10px; }
.barres-etapes .b { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; font-size: 11px; color: var(--doux); }
.barres-etapes .b i { display: block; width: 70%; background: linear-gradient(180deg, var(--orange2), var(--orange)); border-radius: 4px 4px 0 0; transition: height .6s; }
.barres-etapes .b b { color: var(--encre); font-size: 12px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 40%) 1fr 48px; gap: 8px; align-items: center; font-size: 13px; margin: 5px 0; }
.hbar .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .p { background: #120c20; border-radius: 6px; height: 14px; overflow: hidden; }
.hbar .p i { display: block; height: 100%; border-radius: 6px; transition: width .6s; }
.hbar .v { text-align: right; color: var(--doux); }
.score { font-size: 13px; margin: 2px 0 6px; }
.score b { font-size: 20px; color: var(--vert); }
.textes { max-height: 240px; overflow: auto; margin: 0; padding-left: 18px; font-size: 14px; }
.textes li { margin: 5px 0; }
.cache { display: none !important; }
.outils { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0 12px; }
button { font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--ligne); background: #261b40; color: var(--encre); cursor: pointer; }
button.danger { border-color: var(--rouge); color: var(--rouge); background: #2a1220; }
.case { font-size: 14px; color: var(--doux); }
table.liste { width: 100%; border-collapse: collapse; font-size: 14px; }
table.liste th, table.liste td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--ligne); }
table.liste th { color: var(--doux); font-weight: 600; }
td.oui { color: var(--vert); } td.non { color: var(--rouge); }
footer { color: var(--doux); font-size: 13px; text-align: center; margin-top: 16px; }
@media (max-width: 800px) { .grille.haut { grid-template-columns: 1fr; } }
.ligne-ech { margin: 8px 0 2px; color: var(--encre); }