/* HORIZIA — progression joueur. Palette, panneaux et interactions centralisés. */
.compare-page{--grade-bg:#08141f;--grade-panel:#0d1d2b;--grade-line:#adc8da1c;--grade-mint:#7dffb3;--grade-cyan:#5fe3ff;--grade-cream:#f4e9d8;--grade-motion:220ms;--grade-round:16px;padding:38px 0 64px}
.compare-intro{position:relative;margin-bottom:26px;padding:0 0 23px;border:0;border-bottom:1px solid var(--grade-line);background:none;box-shadow:none;border-radius:0}
.compare-intro h1{font:850 clamp(32px,4vw,46px)/1.15 Nunito,sans-serif!important;letter-spacing:-.03em;color:var(--grade-cream);margin:10px 0 12px}
.compare-intro>p{font:400 13px/1.8 Inter,sans-serif;color:#a9c0cb;max-width:720px;margin-bottom:0}
.grade-path{padding:0;margin-bottom:27px}
.grade-path-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:15px}
.grade-path-heading p{font:400 11px/1.6 Inter,sans-serif;color:#9fb4bf;margin:0}
.grade-path-heading .eyebrow{font-size:10px;letter-spacing:.12em}
.grade-roster{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px}
.grade-token{--grade-color:#bdc8ba;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;overflow:hidden;padding:14px 9px 11px;cursor:pointer;text-align:center;border-radius:13px;border:1px solid color-mix(in srgb,var(--grade-color) 28%,#172434);border-top:2px solid color-mix(in srgb,var(--grade-color) 68%,#172434);background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--grade-color) 10%,transparent),transparent 72%),linear-gradient(150deg,#142332,#0b1722);box-shadow:inset 0 1px 0 #ffffff05,0 8px 22px #0003;transition:transform var(--grade-motion),border-color var(--grade-motion),box-shadow var(--grade-motion)}
.grade-token:before{content:"";position:absolute;inset:auto 15% 0;height:1px;background:var(--grade-color);opacity:.4}
.grade-emblem{position:relative;display:grid;place-items:center;width:36px;height:40px;margin-bottom:9px;color:var(--grade-color);background:linear-gradient(145deg,color-mix(in srgb,var(--grade-color) 20%,#101d2b),#0b1722);clip-path:polygon(20% 0,80% 0,100% 18%,100% 72%,50% 100%,0 72%,0 18%)}
.grade-emblem:before{content:"";position:absolute;inset:2px;border:1px solid color-mix(in srgb,var(--grade-color) 34%,transparent);clip-path:inherit}
.grade-emblem svg{width:25px;height:25px;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--grade-color) 20%,transparent))}
.grade-token strong{font:850 18px/1.3 Nunito,sans-serif;letter-spacing:-.02em;color:var(--grade-color)}
.grade-token .grade-tagline{font:600 10px/1.55 Inter,sans-serif;color:#d0d8d7;min-height:0;margin:7px 0 9px}
.grade-specialty{display:block;max-width:100%;font:450 9px/1.65 Inter,sans-serif;color:#8fa9b9;border-top:1px solid var(--grade-line);padding-top:8px;width:100%;min-height:30px}
.grade-token[aria-pressed="true"]{border-color:var(--grade-color);background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--grade-color) 20%,transparent),transparent 85%),#101e2d;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--grade-color) 18%,transparent),0 0 23px color-mix(in srgb,var(--grade-color) 9%,transparent)}
.grade-highlight-hint{font:400 10px/1.7 Inter,sans-serif;color:#91aab6;margin:13px 0 0;text-align:center;min-height:17px}
.grade-game-panel{overflow:hidden;position:relative;border:1px solid #70c9be30;border-radius:var(--grade-round);background:linear-gradient(150deg,#10212f,#091621 65%);box-shadow:inset 0 1px 0 #ffffff06,0 18px 45px #0004}
.grade-game-panel:before{content:"";position:absolute;top:0;left:32px;width:85px;height:2px;background:linear-gradient(90deg,var(--grade-mint),var(--grade-cyan));box-shadow:0 0 12px #7dffb333}
.grade-panel-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 25px 18px}
.grade-panel-top .eyebrow{font-size:9px;letter-spacing:.14em;color:#74cdbb}
.grade-panel-top h2{font:850 clamp(20px,2.1vw,25px)/1.3 Nunito,sans-serif!important;letter-spacing:-.02em;color:var(--grade-cream);margin:6px 0 0;text-transform:none}
.compare-legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 13px;max-width:480px;margin:0}
.compare-legend>span{display:flex;align-items:center;gap:6px;font:450 10px/1.5 Inter,sans-serif;color:#9fb7c1}
.compare-legend .compare-yes{display:inline-grid;place-items:center;font-size:10px;width:20px;height:20px;min-width:20px}
.compare-legend .compare-unlock{padding:2px 6px;font-size:9px}
.grade-filterbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 25px 17px}
.grade-filterbar[hidden],.compare-page [hidden]{display:none!important}
.grade-filters{display:flex;flex-wrap:wrap;gap:5px}
.grade-filters button{font:750 11px/1.5 Nunito,sans-serif;padding:8px 11px;border:1px solid transparent;border-radius:7px;background:transparent;color:#96afbd;cursor:pointer;transition:background var(--grade-motion),border-color var(--grade-motion),color var(--grade-motion)}
.grade-filters button[aria-pressed="true"]{background:#1c393c;border-color:#77e5bd50;color:#a8f3d3;box-shadow:inset 0 1px 0 #a8ffd412}
.grade-search{display:flex;align-items:center;gap:9px;min-width:190px;max-width:240px;flex:1;padding:9px 11px;border:1px solid #a6bfd32b;border-radius:8px;background:#07131e;color:#7995a5}
.grade-search svg{width:15px;height:15px;flex-shrink:0}
.grade-search input{all:unset;box-sizing:border-box;min-width:0;width:100%;font:450 11px/1.7 Inter,sans-serif;color:#d2e3e8}
.grade-search input::placeholder{color:#7893a1}
.grade-search:focus-within{border-color:#81e6ce;box-shadow:0 0 0 2px #81e6ce20}
.compare-mobile-tip{padding:0 25px;margin:0 0 16px;font:450 10px/1.65 Inter,sans-serif;color:#809daa}
.compare-scroll{overflow:auto;max-height:74vh;isolation:isolate;border-radius:0;border:0;border-top:1px solid #a1c1d221;background:#07141e;box-shadow:none;scrollbar-width:thin;scrollbar-color:#4e8b8b #081521}
.grade-comparison{width:100%;min-width:1100px;table-layout:fixed;border-collapse:separate;border-spacing:0;background:#081521;text-align:center;box-shadow:none;border-radius:0;font:450 12px/1.6 Inter,sans-serif}
.grade-comparison thead{position:sticky;top:0;z-index:4}
.grade-comparison thead th{height:66px;padding:16px 7px;border:0;border-bottom:1px solid #abc6d122;background:#122331!important;box-shadow:inset 0 2px 0 color-mix(in srgb,var(--grade-color,#89c6b7) 60%,transparent);vertical-align:middle;text-align:center}
.grade-comparison thead th:first-child{width:28%;padding-left:23px;text-align:left;background:#122331!important;box-shadow:none}
.grade-comparison .compare-heading-label{font:800 13px/1.5 Nunito,sans-serif;color:#e1e5df}
.grade-comparison th small{color:#8fa9b8;font:450 10px/1.6 Inter,sans-serif;margin-top:3px}
.grade-comparison .compare-rank-name{display:inline;font:800 13px/1.5 Nunito,sans-serif;letter-spacing:0;color:var(--grade-color)!important;text-shadow:none}
.grade-column-dot{display:inline-block;width:5px;height:5px;margin-right:6px;vertical-align:middle;background:var(--grade-color);transform:rotate(45deg);opacity:.85}
.grade-comparison tbody tr:not(.compare-section)>th,.grade-comparison tbody tr:not(.compare-section)>td{padding:15px 9px;border:0;border-bottom:1px solid #a1bbd013;background:#0b1926;color:#b6cbd3;font-size:11px;line-height:1.7;transition:background var(--grade-motion),box-shadow var(--grade-motion)}
.grade-comparison tbody tr:nth-child(even):not(.compare-section)>th,.grade-comparison tbody tr:nth-child(even):not(.compare-section)>td{background:#0e1d2a}
.grade-comparison tbody tr:not(.compare-section)>th{padding-left:23px;text-align:left;color:#c6d7de;font-weight:550;background:#10212d}
.grade-comparison tbody tr:nth-child(even):not(.compare-section)>th{background:#132330}
.grade-comparison tbody tr:not(.compare-section)>td{border-left:1px solid #a1bbd00b}
.grade-comparison tr:not(.compare-section)>th:first-child{position:sticky;left:0;z-index:2;box-shadow:5px 0 14px #0002}
.grade-comparison thead tr>th:first-child{z-index:6}
.grade-comparison td strong{font:850 19px/1.4 Nunito,sans-serif;color:#eae7da;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.grade-comparison .compare-section th{position:static;padding:12px 23px;text-align:left;background:linear-gradient(90deg,#153338,#10232f)!important;border-block:1px solid #86d6c41c;font:850 10px/1.6 Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#83dfc3}
.grade-comparison .compare-section th:before{content:"";display:inline-block;width:4px;height:10px;margin-right:10px;background:#7be4bc;border-radius:1px;vertical-align:-1px;box-shadow:0 0 7px #7be4bc20}
.grade-comparison .compare-section th span{font:450 10px/1.6 Inter,sans-serif;color:#91acb5;letter-spacing:0;text-transform:none;margin-left:16px}
.grade-comparison .compare-yes,.compare-legend .compare-yes{display:inline-grid;place-items:center;min-width:23px;height:23px;color:#9ae2bf;background:#15352f;border:1px solid #79dbb02e;border-radius:6px;box-shadow:inset 0 1px 0 #bcffdf08;font:800 12px/1 Nunito,sans-serif}
.grade-comparison .compare-unlock,.compare-legend .compare-unlock{display:inline-block;color:#d4c18c;background:#343020;border:1px solid #c3a35c45;border-radius:5px;padding:3px 7px;font:750 9px/1.6 Nunito,sans-serif;white-space:nowrap}
.grade-comparison .compare-no,.grade-comparison .compare-unknown{color:#597888}
.grade-comparison td.compare-upgrade small,.compare-delta-example{display:inline-block;font:750 9px/1.5 Nunito,sans-serif;padding:2px 5px;margin-left:5px;border-radius:4px;color:#8ee9bd;background:#1b3c32;border:1px solid #7fdbad1f;white-space:nowrap}
.grade-comparison td.compare-upgrade strong{color:#a0e1c5}
.grade-comparison td.is-rank-highlighted,.grade-comparison tbody tr:nth-child(even)>td.is-rank-highlighted{background:color-mix(in srgb,var(--grade-color) 9%,#0b1926)!important;box-shadow:inset 1px 0 0 color-mix(in srgb,var(--grade-color) 33%,transparent),inset -1px 0 0 color-mix(in srgb,var(--grade-color) 33%,transparent)}
.grade-comparison td.is-rank-highlighted strong{color:var(--grade-color)}
.grade-comparison thead th.is-rank-highlighted{background:color-mix(in srgb,var(--grade-color) 15%,#0b1926)!important;box-shadow:inset 0 3px 0 var(--grade-color)}
.command-group-title{display:block;font:800 12px/1.5 Nunito,sans-serif;color:#e0e5df}
.grade-command-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.grade-command-chips code,.compare-inline-code{display:inline-block;max-width:100%;white-space:normal;overflow-wrap:anywhere;padding:3px 6px;border:1px solid #86c6be26;border-bottom:2px solid #0a121a;border-radius:5px;background:linear-gradient(#1a2e3c,#142632);color:#97c9c9;font:450 10px/1.45 ui-monospace,Consolas,monospace}
.compare-inline-code{display:table;margin-top:6px}
.grade-comparison .command-group-row>th{vertical-align:top!important}
.grade-comparison .compare-label-note{display:block;max-width:100%;margin-top:5px;line-height:1.7;color:#8ca8b4}
.grade-no-results{padding:24px;text-align:center;font:500 13px/1.8 Inter,sans-serif;color:#b4cad2}
.compare-notes{max-width:none;padding:20px 2px;margin-top:5px;border:0;background:none;box-shadow:none}
.compare-notes p{font:450 11px/1.9 Inter,sans-serif;color:#839eac;margin:7px 0}
.compare-notes strong{color:#a6c2cb}
.grade-token:focus-visible,.grade-filters button:focus-visible,.compare-scroll:focus-visible{outline:2px solid #8cebd5;outline-offset:3px}
@media(hover:hover){.grade-token:hover{transform:translateY(-4px);border-color:var(--grade-color);box-shadow:0 12px 26px #0004,0 0 18px color-mix(in srgb,var(--grade-color) 9%,transparent)}.grade-filters button:hover{background:#1c303d;color:#d7e9e9}.grade-comparison tbody tr:not(.compare-section):hover>td{background:#132a35}.grade-comparison tbody tr:not(.compare-section):hover>th{background:#1b3440}}
.grade-token:active,.grade-filters button:active{transform:translateY(1px)}
@media(prefers-reduced-motion:no-preference){.grade-token{animation:grade-token-enter .55s ease-out both}.grade-token:nth-child(2){animation-delay:40ms}.grade-token:nth-child(3){animation-delay:80ms}.grade-token:nth-child(4){animation-delay:120ms}.grade-token:nth-child(5){animation-delay:160ms}.grade-token:nth-child(6){animation-delay:200ms}@keyframes grade-token-enter{from{opacity:.3;translate:0 8px}to{opacity:1;translate:0 0}}}
@media(max-width:1000px){.grade-roster{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.grade-token{display:grid;grid-template-columns:42px 1fr;column-gap:12px;text-align:left;padding:14px;align-items:center}.grade-emblem{grid-row:1/4;width:39px;height:44px;margin:0}.grade-token strong{font-size:16px}.grade-token .grade-tagline{min-height:0;margin:4px 0;font-size:10px}.grade-specialty{border:0;padding:0;min-height:0;font-size:9px}.grade-panel-top{align-items:flex-start;flex-direction:column;gap:14px}.compare-legend{justify-content:flex-start;max-width:none}.grade-filterbar{align-items:stretch;flex-direction:column;gap:13px}.grade-search{max-width:none;flex:none}}
@media(max-width:600px){.compare-page{padding-top:27px}.compare-intro{padding-bottom:20px;margin-bottom:20px}.compare-intro h1{font-size:32px!important}.compare-intro>p{font-size:12px}.grade-path-heading{display:block;margin-bottom:13px}.grade-path-heading p{font-size:10px;margin-top:7px}.grade-roster{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.grade-token{display:flex;padding:14px 9px 11px;text-align:center}.grade-token strong{font-size:16px}.grade-emblem{width:34px;height:38px;margin-bottom:8px}.grade-emblem svg{width:22px;height:22px}.grade-token .grade-tagline{font-size:9px;min-height:28px;margin:5px 0}.grade-specialty{font-size:8px;min-height:26px;line-height:1.7}.grade-highlight-hint{text-align:left;font-size:10px}.grade-panel-top{padding:22px 16px 16px}.grade-panel-top h2{font-size:22px!important}.grade-filterbar{padding:0 16px 14px}.grade-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.grade-filters button{padding:9px 4px;font-size:10px;border-color:#9abccc14}.grade-search{min-width:0;max-width:none;padding-block:11px}.compare-mobile-tip{padding-inline:16px;font-size:10px}.grade-comparison{min-width:1000px}.grade-comparison thead th:first-child{width:210px}.grade-comparison thead th:first-child,.grade-comparison tbody tr:not(.compare-section)>th{padding-left:14px}.grade-comparison thead th{height:58px;padding:12px 5px}.grade-comparison .compare-rank-name{font-size:12px}.grade-column-dot{width:4px;height:4px;margin-right:4px}.grade-comparison .compare-section th{padding:11px 14px}.grade-comparison .compare-section th span{display:block;margin:4px 0 0;max-width:290px}.grade-comparison tbody tr:not(.compare-section)>th,.grade-comparison tbody tr:not(.compare-section)>td{padding-block:13px}.grade-command-chips{gap:4px}.grade-command-chips code{font-size:9px}.compare-notes p{font-size:10px}.compare-legend{gap:8px 12px}.compare-legend>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.grade-token,.grade-token *,.grade-filters button,.grade-comparison *{animation:none!important;transition:none!important;transform:none!important;translate:none!important}}

/* ROYAUME VIVANT — couche visuelle et animations de la page Grades. */
.grades-realm{--realm-gold:#e1bc70;--realm-gold-light:#ffebaf;--realm-emerald:#7dffb3;--realm-cyan:#5fe3ff;background-color:#090b15;background-image:radial-gradient(ellipse at 50% 180px,#176e5926,transparent 950px),linear-gradient(#080a12aa,#080b12df),url('assets-horizia/pierre-royaume.webp');background-size:auto,auto,500px}
.grades-realm .compare-page{padding-top:22px;--grade-line:#b3925138;--grade-cream:#fff0ca}




.grades-realm .realm-grade-hero{position:relative;isolation:isolate;overflow:visible;min-height:278px;display:grid;place-items:center;text-align:center;padding:36px 100px 31px;margin:0;border:1px solid #e0b96eab;border-radius:5px;background:#141121;box-shadow:inset 0 0 0 4px #060811,inset 0 0 0 5px #e3b65c55,0 8px 35px #0007}
.grade-hero-scene{position:absolute;inset:5px;overflow:hidden;z-index:-1;background-image:linear-gradient(90deg,#072c2d77,#06262799 40%,#0a10234d),linear-gradient(0deg,#080a16eb,transparent 70%),url('assets-horizia/royaume-chateau.webp');background-size:cover;background-position:center 39%;border-radius:2px}
.grade-hero-scene:after{content:"";position:absolute;inset:-30%;background:radial-gradient(ellipse at 35% 45%,#7dffb328,transparent 42%),radial-gradient(ellipse at 75% 40%,#5fe3ff25,transparent 50%);animation:realm-sky-drift 18s ease-in-out infinite alternate}
.grade-hero-copy{max-width:830px;position:relative;z-index:2}
.grades-realm .compare-intro .eyebrow{font:650 10px/1.8 Inter,sans-serif;letter-spacing:.18em;color:#e3c582;text-shadow:0 2px 8px #000}
.grades-realm .compare-intro h1{font:700 clamp(29px,4.1vw,56px)/1.18 Cinzel,Georgia,serif!important;letter-spacing:.015em;text-transform:uppercase;margin:12px 0 8px;color:#ffe7a6;background:linear-gradient(105deg,#ce9c45 5%,#fff1bc 27%,#f5d884 45%,#fff8d9 55%,#c48b37 75%,#ffe6a1 95%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 1px #170a08) drop-shadow(0 0 16px #c78b4528);animation:realm-title-gold 8s ease-in-out infinite}
.grades-realm .compare-intro .grade-hero-subtitle{font:italic 500 clamp(19px,2.2vw,27px)/1.5 Georgia,serif;color:#f4e9d8;margin:0 0 14px;text-shadow:0 3px 8px #000}
.grades-realm .compare-intro .grade-hero-copy>p:last-child{font:450 11px/1.8 Inter,sans-serif;color:#dedbd8;max-width:630px;margin:0 auto;text-shadow:0 2px 6px #000}
.grade-hero-standard{position:absolute;top:-4px;width:57px;height:168px;display:flex;align-items:center;justify-content:center;padding-bottom:20px;clip-path:polygon(0 0,100% 0,100% 84%,50% 100%,0 84%);font:650 46px/1 Cinzel,serif;color:#edcc83;background:linear-gradient(90deg,#0a1c24,#176346 48%,#0c2630);border-inline:2px solid #e1bc70;filter:drop-shadow(0 6px 6px #0007);transform-origin:top center;animation:realm-banner-sway 7s ease-in-out infinite}
.grade-hero-standard:after{content:"";position:absolute;inset:9px 7px 20px;border-inline:1px solid #b9934d88;pointer-events:none}
.standard-left{left:26px}.standard-right{right:26px;animation-delay:-3.5s}
.hero-gem{position:absolute;width:13px;height:13px;background:#b7ffe1;border:2px solid #fff0b1;transform:rotate(45deg);bottom:-7px;left:calc(50% - 6px);box-shadow:0 0 18px #35d9bf,0 0 34px #35d9bf3d;z-index:3;animation:realm-gem-aura 3.5s ease-in-out infinite}
.realm-motes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.realm-motes span{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#ffe3a0;box-shadow:0 0 8px #eabd65;opacity:0;animation:realm-mote-flight var(--flight) ease-in-out infinite;animation-delay:var(--delay)}
.realm-motes span:nth-child(3n){background:#8cebd3;box-shadow:0 0 8px #42d4cb;width:2px;height:2px}
.realm-rule-strip{position:relative;display:flex;align-items:center;justify-content:center;gap:26px;margin:14px 0 24px;padding:13px 20px;border-block:1px solid #c9a35b77;background:linear-gradient(90deg,transparent,#201822a8 30%,#102d36a8 70%,transparent);color:#e1d6b8}
.realm-rule-strip span{display:flex;align-items:center;gap:9px;font:500 11px/1.6 Inter,sans-serif}
.realm-rule-strip span+span{border-left:1px solid #c6a46066;padding-left:26px}
.realm-rule-strip svg{width:19px;height:19px;fill:none;stroke:#e6c37f;stroke-width:1.5;flex-shrink:0}
.grades-realm .grade-path{margin-bottom:25px}
.grades-realm .grade-path-heading{position:relative;justify-content:center;margin:0 0 18px;gap:18px}
.grades-realm .grade-path-heading .eyebrow{font:650 19px/1.5 Cinzel,Georgia,serif;letter-spacing:.02em;color:#e6c176;text-transform:uppercase;text-align:center;display:flex;align-items:center;gap:17px}
.grades-realm .grade-path-heading .eyebrow:before,.grades-realm .grade-path-heading .eyebrow:after{content:"";height:1px;width:70px;background:linear-gradient(90deg,transparent,#c29d50)}
.grades-realm .grade-path-heading .eyebrow:after{rotate:180deg}
.grades-realm .grade-path-heading p{display:none}
.grades-realm .grade-roster{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grades-realm .grade-token{position:relative;isolation:isolate;display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;align-items:center;min-height:191px;padding:16px 18px 14px;text-align:left;border:1px solid #d5b16ba6;border-radius:5px;background:#0d101b;box-shadow:inset 0 0 0 3px #060812,inset 0 0 0 4px #9a743c6b,0 8px 20px #0005;overflow:hidden;transform:perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--card-lift,0px));transform-style:preserve-3d;transition:transform .18s ease-out,border-color .22s,box-shadow .22s;animation:none;translate:none;cursor:pointer}
.rank-scene{position:absolute;inset:4px;z-index:-2;background-image:linear-gradient(90deg,#0b0b14f5,#0c0c16e6 48%,#1011216b 100%),linear-gradient(0deg,#080a14b8,transparent 80%),var(--rank-scene);background-size:cover;background-position:center,right center;background-repeat:no-repeat;opacity:.93;transition:opacity .35s,transform .6s}
.rank-spotlight{position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),color-mix(in srgb,var(--grade-color) 18%,transparent),transparent 65%);opacity:0;transition:opacity .25s}
.grades-realm .grade-token:before{content:"";position:absolute;inset:-85% auto auto -55%;width:24%;height:270%;z-index:4;pointer-events:none;background:linear-gradient(90deg,transparent,#fff0b519,transparent);transform:rotate(24deg) translateX(-350%);opacity:0;animation:realm-card-sheen 8s ease-in-out infinite;animation-delay:calc(var(--rank-delay) * 9)}
.grades-realm .grade-token:after{content:"";position:absolute;inset:4px;border:1px solid #cba55a63;pointer-events:none;z-index:3}
.grades-realm .grade-emblem{display:block;position:relative;width:90px;height:119px;margin:0;color:var(--grade-color);background:none;clip-path:none;filter:drop-shadow(0 6px 4px #000c) drop-shadow(0 0 12px color-mix(in srgb,var(--grade-color) 24%,transparent));animation:realm-crest-float 4.5s ease-in-out infinite;animation-delay:calc(var(--rank-delay) * -9)}
.grades-realm .grade-emblem:before{display:none}
.grades-realm .grade-emblem>svg{display:block;width:100%;height:100%;filter:none}
.grade-token-copy{display:block;min-width:0;position:relative}
.grades-realm .grade-token strong{display:block;font:700 22px/1.25 Cinzel,Georgia,serif;letter-spacing:.01em;text-transform:uppercase;color:var(--grade-color);text-shadow:0 2px 4px #000,0 0 12px color-mix(in srgb,var(--grade-color) 18%,transparent)}
.rank-requirement{display:block;font:650 11px/1.6 Nunito,sans-serif;color:#f2d691;margin:5px 0 7px;padding-bottom:6px;border-bottom:1px solid #c3a16952;font-variant-numeric:tabular-nums}
.rank-feature-list{display:grid;gap:3px}
.rank-feature-list>span{display:block;position:relative;padding-left:10px;font:450 10px/1.5 Inter,sans-serif;color:#ede7dc;text-shadow:0 1px 3px #000}
.rank-feature-list>span:before{content:"";position:absolute;left:0;top:5px;width:4px;height:4px;rotate:45deg;background:#e7c97c}
.rank-inheritance{display:block;margin-top:8px;font:italic 10px/1.5 Georgia,serif;color:#d6c397}
.rank-selected-seal{position:absolute;right:10px;top:8px;font:700 7px/1.4 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--grade-color);opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s}
.grade-corner{position:absolute;width:12px;height:12px;border:1px solid #f3d58b;z-index:5;pointer-events:none;background:linear-gradient(135deg,#ffdda2,#826130 48%,#e8c885);box-shadow:0 0 0 2px #0d0b12;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.corner-tl{left:1px;top:1px}.corner-tr{right:1px;top:1px}.corner-bl{left:1px;bottom:1px}.corner-br{right:1px;bottom:1px}
.grades-realm .grade-token[aria-pressed="true"]{border-color:#fff1b5;background:#0d101b;box-shadow:inset 0 0 0 3px #071b22,inset 0 0 0 4px var(--grade-color),0 0 22px color-mix(in srgb,var(--grade-color) 25%,transparent),0 8px 25px #0009}
.grades-realm .grade-token[aria-pressed="true"] .rank-selected-seal{opacity:1;transform:translateY(0)}
.grades-realm .grade-token[aria-pressed="true"] .rank-spotlight{opacity:1}
.grades-realm .grade-token[aria-pressed="true"] .grade-emblem{filter:drop-shadow(0 7px 4px #000c) drop-shadow(0 0 17px color-mix(in srgb,var(--grade-color) 45%,transparent))}
.grades-realm .grade-highlight-hint{font:italic 11px/1.7 Georgia,serif;color:#b6a98f;margin-top:15px}
.grades-realm .grade-game-panel{border:1px solid #cba55c99;border-radius:6px;background:linear-gradient(#0c2028ee,#081923f7),url('assets-horizia/pierre-royaume.webp') center/500px;box-shadow:inset 0 0 0 3px #080a11,inset 0 0 0 4px #ae86434a,0 16px 45px #0008}
.grades-realm .grade-game-panel:before{left:calc(50% - 50px);width:100px;background:linear-gradient(90deg,transparent,#f0c78b,#7dffb3,#f0c78b,transparent);box-shadow:0 0 18px #5fe3ff66;animation:realm-panel-aura 4s ease-in-out infinite}
.grades-realm .grade-panel-top{padding-top:25px}
.grades-realm .grade-panel-top .eyebrow{color:#bfa06a}
.grades-realm .grade-panel-top h2{font:650 clamp(18px,2.2vw,25px)/1.5 Cinzel,Georgia,serif!important;text-transform:uppercase;letter-spacing:0;color:#f0d18c}
.grades-realm .compare-legend>span{color:#bcb5b5}
.grades-realm .grade-filters button{position:relative;overflow:hidden;border:1px solid #ab87453d;background:#12101a;border-radius:4px;color:#c3b7ab;box-shadow:inset 0 0 0 2px #090911;transition:transform .2s,border-color .2s,box-shadow .2s}
.grades-realm .grade-filters button[aria-pressed="true"]{border-color:#e5c278;background:linear-gradient(135deg,#145643,#0b303b);color:#fff1d2;box-shadow:inset 0 0 0 2px #0c2328,0 0 15px #48dcb940}
.grades-realm .grade-filters button[aria-pressed="true"]:after{content:"";position:absolute;left:15%;right:15%;bottom:1px;height:1px;background:#8effd0;box-shadow:0 0 9px #5fe3ff}
.grades-realm .grade-search{background:#090a13;border-color:#c5a06047;border-radius:4px;color:#ac996e}
.grades-realm .grade-search:focus-within{border-color:#f0cf88;box-shadow:0 0 0 2px #5fe3ff27,0 0 18px #42bda515}
.grades-realm .grade-search input{color:#f4e9d8}
.grades-realm .compare-scroll{border-color:#b79a554f;scrollbar-color:#b18a47 #0b0a13}
.grades-realm .grade-comparison{background:#0b0b13}
.grades-realm .grade-comparison thead th{background:linear-gradient(#182e31,#0c2028)!important;border-bottom-color:#cfa95c63;box-shadow:inset 0 2px 0 color-mix(in srgb,var(--grade-color,#ddb86c) 70%,transparent)}
.grades-realm .grade-comparison thead th:first-child{background:linear-gradient(#182e31,#0c2028)!important}
.grades-realm .grade-comparison .compare-rank-name{font-family:Cinzel,Georgia,serif;font-size:12px}
.grades-realm .grade-comparison .compare-heading-label{color:#f0d28f}
.grades-realm .grade-comparison tbody tr:not(.compare-section)>th{background:#0f252c;color:#ded4bd}
.grades-realm .grade-comparison tbody tr:nth-child(even):not(.compare-section)>th{background:#132c30}
.grades-realm .grade-comparison tbody tr:not(.compare-section)>td{background:#0f1019;border-color:#bc95531c}
.grades-realm .grade-comparison tbody tr:nth-child(even):not(.compare-section)>td{background:#10232d}
.grades-realm .grade-comparison tbody tr:not(.compare-section)>th,.grades-realm .grade-comparison tbody tr:not(.compare-section)>td{border-bottom-color:#bb985023}
.grades-realm .grade-comparison .compare-section th{background:linear-gradient(90deg,#18342f,#0e202b)!important;color:#e8c581;border-block-color:#b8995747}
.grades-realm .grade-comparison .compare-section th:before{width:6px;height:6px;rotate:45deg;background:#e2bd76;box-shadow:0 0 10px #5fe3ff66;margin-right:12px}
.grades-realm .grade-comparison .compare-section th span{color:#ab9fb0}
.grades-realm .grade-comparison td strong{color:#eee0be}
.grades-realm .grade-comparison td.compare-upgrade strong{color:#bce6b8}
.grades-realm .grade-comparison .compare-yes,.grades-realm .compare-legend .compare-yes{color:#a8f185;background:#19301e;border-color:#9be87738;box-shadow:inset 0 1px 0 #eaffdd0a,0 0 9px #7bdc6a0a}
.grades-realm .grade-comparison .compare-unlock,.grades-realm .compare-legend .compare-unlock{color:#b6ffe0;background:linear-gradient(120deg,#153e36,#0e272c);border-color:#6de3bf7d;border-radius:20px;box-shadow:0 0 7px #42bda51a}
.grades-realm .grade-comparison td.compare-upgrade small{color:#ddcf94;background:#342c20;border-color:#c5a45942}
.grades-realm .grade-command-chips code,.grades-realm .compare-inline-code{background:linear-gradient(#2a2230,#171420);border-color:#a9895555;border-bottom-color:#05060c;color:#dfc78f;box-shadow:inset 0 1px 0 #ffffff06}
.grades-realm .grade-comparison td.is-rank-highlighted,.grades-realm .grade-comparison tbody tr:nth-child(even)>td.is-rank-highlighted{background:color-mix(in srgb,var(--grade-color) 11%,#0c2028)!important;box-shadow:inset 1px 0 color-mix(in srgb,var(--grade-color) 42%,transparent),inset -1px 0 color-mix(in srgb,var(--grade-color) 42%,transparent)}
.grades-realm .grade-comparison thead th.is-rank-highlighted{position:relative;overflow:hidden;background:color-mix(in srgb,var(--grade-color) 20%,#102b30)!important;box-shadow:inset 0 3px var(--grade-color),0 0 20px color-mix(in srgb,var(--grade-color) 15%,transparent)}
.grades-realm .grade-comparison thead th.is-rank-highlighted:after{content:"";position:absolute;left:-50%;bottom:0;width:55%;height:2px;background:linear-gradient(90deg,transparent,var(--grade-color),transparent);animation:realm-column-scan 2.7s linear infinite}
.grades-realm .grade-comparison.is-filtering tbody{animation:realm-table-switch .42s ease-out}
.grades-realm .compare-notes{position:relative;padding:17px 22px;margin-top:23px;border:1px solid #b3914c52;background:linear-gradient(120deg,#11262bc9,#0c2028cd);border-radius:5px;box-shadow:inset 0 0 0 3px #0a0b13}
.grades-realm .compare-notes p{color:#b0a8b6}
.grades-realm .compare-notes strong{color:#d7be8b}
.realm-edge-decor{position:fixed;inset:85px 0 0;z-index:8;pointer-events:none}
.realm-rail{position:absolute;top:0;bottom:0;width:7px;background:linear-gradient(90deg,#0a0a10,#4a3940 45%,#aa854958,#0b0911);opacity:.7}
.rail-left{left:5px}.rail-right{right:5px;rotate:180deg}
.realm-impact{position:absolute;pointer-events:none;z-index:10;width:22px;height:22px;border-radius:50%;border:2px solid #ffdf9d;box-shadow:0 0 10px #7dffb377;transform:translate(-50%,-50%) scale(.3);animation:realm-click-wave .65s ease-out forwards}
.realm-impact:after{content:"";position:absolute;inset:5px;border:1px solid #5fe3ff;border-radius:50%}
.realm-motion-ready .realm-rank-card:not(.is-revealed){opacity:0;translate:0 18px}
.realm-rank-card.is-revealed{animation:realm-card-enter .65s cubic-bezier(.16,1,.3,1) backwards;animation-delay:var(--rank-delay)}
@media(hover:hover){.grades-realm .grade-token:hover{--card-lift:-5px;border-color:#ffe6a4;box-shadow:inset 0 0 0 3px #090913,inset 0 0 0 4px #d3ad68c9,0 16px 26px #0009,0 0 20px color-mix(in srgb,var(--grade-color) 24%,transparent)}.grades-realm .grade-token:hover .rank-spotlight{opacity:1}.grades-realm .grade-token:hover .rank-scene{opacity:1;transform:translateX(3px)}.grades-realm .grade-filters button:hover{transform:translateY(-2px);border-color:#e9c47b;box-shadow:0 0 13px #5fe3ff25}.grades-realm .grade-comparison tbody tr:not(.compare-section):hover>th{background:#173c39;box-shadow:inset 3px 0 #d4ad67,5px 0 15px #0003}.grades-realm .grade-comparison tbody tr:not(.compare-section):hover>td{background:#102e33}}
.grades-realm .grade-token:active{--card-lift:1px;filter:brightness(1.08)}
@keyframes realm-title-gold{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes realm-nav-aura{0%,100%{box-shadow:inset 0 0 0 2px #120c20,0 0 12px #5fe3ff38}50%{box-shadow:inset 0 0 0 2px #120c20,0 0 22px #5fe3ff60}}
@keyframes realm-sky-drift{from{transform:translate(-3%,-1%)}to{transform:translate(4%,3%)}}
@keyframes realm-banner-sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes realm-gem-aura{0%,100%{box-shadow:0 0 12px #35d9bf,0 0 28px #35d9bf30}50%{box-shadow:0 0 22px #35d9bf,0 0 38px #35d9bf55}}
@keyframes realm-mote-flight{0%{opacity:0;transform:translate(0,14px) scale(.5)}25%{opacity:.75}75%{opacity:.5}100%{opacity:0;transform:translate(18px,-75px) scale(.2)}}
@keyframes realm-crest-float{0%,100%{transform:translateY(2px) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes realm-card-sheen{0%,58%{opacity:0;transform:rotate(24deg) translateX(-350%)}64%{opacity:1}85%,100%{opacity:0;transform:rotate(24deg) translateX(950%)}}
@keyframes realm-panel-aura{0%,100%{opacity:.65;transform:scaleX(.8)}50%{opacity:1;transform:scaleX(1.1)}}
@keyframes realm-column-scan{from{transform:translateX(0)}to{transform:translateX(300%)}}
@keyframes realm-click-wave{from{opacity:1;transform:translate(-50%,-50%) scale(.3)}to{opacity:0;transform:translate(-50%,-50%) scale(8)}}
@keyframes realm-card-enter{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes realm-table-switch{from{opacity:.4;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.realm-edge-decor{display:none}.grades-realm .grade-token{grid-template-columns:72px minmax(0,1fr);gap:11px;padding-inline:14px}.grades-realm .grade-emblem{width:72px;height:100px}.grades-realm .grade-token strong{font-size:19px}.rank-feature-list>span{font-size:9px}.rank-inheritance{font-size:9px}.rank-requirement{font-size:10px}}
@media(max-width:800px){.grades-realm .grade-roster{grid-template-columns:repeat(2,minmax(0,1fr))}.grades-realm .realm-grade-hero{padding:32px 60px;min-height:260px}.grade-hero-standard{width:36px;height:116px;font-size:31px}.standard-left{left:12px}.standard-right{right:12px}.realm-rule-strip{gap:12px;padding-inline:12px}.realm-rule-strip span{font-size:10px}.realm-rule-strip span+span{padding-left:12px}.grades-realm .grade-path-heading .eyebrow{font-size:16px}.grades-realm .grade-path-heading .eyebrow:before,.grades-realm .grade-path-heading .eyebrow:after{width:30px}.grades-realm .grade-token{min-height:180px}}
@media(max-width:600px){.grades-realm .compare-page{padding-top:15px}.grades-realm .realm-grade-hero{padding:34px 22px 27px;min-height:280px}.grades-realm .compare-intro h1{font-size:31px!important;line-height:1.2!important;letter-spacing:0;margin-inline:20px}.grades-realm .compare-intro .eyebrow{font-size:8px;letter-spacing:.13em}.grades-realm .compare-intro .grade-hero-subtitle{font-size:21px}.grades-realm .compare-intro .grade-hero-copy>p:last-child{font-size:10px;max-width:270px}.grade-hero-standard{width:22px;height:89px;font-size:21px;padding-bottom:13px;top:8px;border-width:1px;opacity:.85}.grade-hero-standard:after{inset:4px 3px 14px}.standard-left{left:5px}.standard-right{right:5px}.realm-rule-strip{display:grid;gap:8px;margin:14px 0 20px;padding:12px}.realm-rule-strip span{justify-content:center;font-size:9px}.realm-rule-strip span+span{border:0;padding:0}.realm-rule-strip svg{width:15px;height:15px}.grades-realm .grade-path-heading{margin-bottom:14px}.grades-realm .grade-path-heading .eyebrow{font-size:13px;justify-content:center;gap:10px}.grades-realm .grade-path-heading .eyebrow:before,.grades-realm .grade-path-heading .eyebrow:after{width:18px}.grades-realm .grade-roster{grid-template-columns:1fr;gap:13px}.grades-realm .grade-token{grid-template-columns:83px minmax(0,1fr);gap:16px;min-height:179px;padding:16px 21px}.grades-realm .grade-emblem{width:83px;height:111px}.grades-realm .grade-token strong{font-size:22px}.rank-requirement{font-size:11px}.rank-feature-list>span{font-size:10px}.rank-inheritance{font-size:10px}.grades-realm .grade-panel-top h2{font-size:19px!important}.grades-realm .grade-highlight-hint{font-size:11px;text-align:center}.realm-motes span:nth-child(n+10){display:none}.grades-realm .compare-notes{padding:14px}.grades-realm .grade-comparison .compare-rank-name{font-size:11px}}
@media(prefers-reduced-motion:reduce){.grades-realm *,.grades-realm *:before,.grades-realm *:after{animation:none!important;transition:none!important}.grades-realm .grade-token,.grades-realm .grade-emblem{transform:none!important;translate:none!important;opacity:1!important}.realm-motion-ready .realm-rank-card:not(.is-revealed){opacity:1;translate:none}.realm-motes,.realm-impact{display:none}.grade-hero-scene:after{transform:none}.grades-realm .grade-token:before{opacity:0}.hero-gem{transform:rotate(45deg)}}
/* Ajustements de cadrage : la bannière occupe toute la largeur du comparatif. */
.grades-realm .realm-grade-hero{width:100%;max-width:none}



/* Les effets hors écran sont mis en pause ; l'entrée de chaque carte reste unique. */
.realm-motion-ready .realm-rank-card:not(.is-in-view) .grade-emblem,.realm-motion-ready .realm-rank-card:not(.is-in-view):before,.realm-motion-ready .realm-grade-hero:not(.is-in-view) .realm-motes span,.realm-motion-ready .realm-grade-hero:not(.is-in-view) .grade-hero-scene:after{animation-play-state:paused}