/* Calculateur d'héritage */
.hr [hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hr{overflow-wrap:break-word}

/* Barre : compteur, outils, message */
.hr-bar{position:sticky;top:0;margin:0 0 10px;padding:8px 14px;background:var(--panel);border:1px solid var(--bronze-dim);border-radius:6px;z-index:20}
.hr-counter{margin:0;font-size:1rem;color:var(--cream)}
.hr-counter strong{font-size:1.35rem;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.hr-tools{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:0 0 18px}
.hr-lien{flex:1 1 220px;min-width:0;max-width:100%;padding:9px 10px;border:1px solid var(--bronze-dim);border-radius:3px;background:var(--panel-2,var(--panel));color:var(--cream);font:.85rem ui-monospace,SFMono-Regular,Menlo,monospace}
.hr-lien:focus{outline:2px solid var(--gold-bright);outline-offset:1px}
.hr-message{margin:6px 0 0;color:var(--cream);font-size:.98rem}
.hr-message:not(:empty){padding:4px 10px;line-height:1.35;border-left:4px solid var(--gold);background:var(--panel-2,var(--panel))}
/* L'en-tête du site est collant au-dessus de 1000 px : la barre se cale dessous ; en dessous, l'en-tête défile et la barre colle en haut. */
@media (min-width:1001px){.hr-bar{top:var(--hr-top,76px)}}

/* Mise en page : arbres + panneau de résumé */
.hr-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.hr-trees{display:flex;flex-direction:column;gap:22px;min-width:0}
.hr-tree{padding:14px 14px 16px;background:var(--panel);border:1px solid var(--bronze-dim);border-radius:6px;min-width:0}
.hr-tree h2{margin:0;color:var(--gold-bright);font-size:1.25rem}
.hr-tree-points{margin:2px 0 12px;font-size:.9rem;color:var(--cream-dim)}
.hr-tree-points span{font-weight:700;color:var(--cream)}

/* Arbre lu à la verticale : la profondeur du jeu (colonne c) descend dans la page (rang de grille), la voie (ligne l) devient la colonne.
   Positions par classes, jamais en ligne. */
.hr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,auto);gap:10px;list-style:none;margin:0;padding:0}
.hr-c0{grid-row:1}.hr-c1{grid-row:2}.hr-c2{grid-row:3}.hr-c3{grid-row:4}
.hr-l0{grid-column:1}.hr-l1{grid-column:2}.hr-l2{grid-column:3}.hr-l3{grid-column:4}
/* Ordre de lecture en liste (écrans étroits, sans JavaScript) : profondeur d'abord, puis voie. */
.hr-c0.hr-l0{order:0}.hr-c0.hr-l1{order:1}.hr-c0.hr-l2{order:2}.hr-c0.hr-l3{order:3}.hr-c1.hr-l0{order:4}.hr-c1.hr-l1{order:5}.hr-c1.hr-l2{order:6}.hr-c1.hr-l3{order:7}.hr-c2.hr-l0{order:8}.hr-c2.hr-l1{order:9}.hr-c2.hr-l2{order:10}.hr-c2.hr-l3{order:11}.hr-c3.hr-l0{order:12}.hr-c3.hr-l1{order:13}.hr-c3.hr-l2{order:14}.hr-c3.hr-l3{order:15}

/* Cartes */
.hr-node{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:10px 12px;background:var(--panel-2,var(--panel));border:1px solid var(--bronze-dim);border-left-width:4px;border-radius:6px;color:var(--cream);scroll-margin-top:130px}
.hr-node h3{margin:0;font-size:1rem;line-height:1.25;color:var(--cream)}
.hr-node-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px;cursor:pointer;min-height:40px}
.hr-rang{flex:none;padding:2px 8px;border:1px solid var(--bronze-dim);border-radius:10px;font-size:.85rem;font-variant-numeric:tabular-nums;color:var(--cream-dim);white-space:nowrap}
.hr-alias,.hr-exigence{margin:0;font-size:.85rem;color:var(--cream-dim)}
.hr-effet{margin:0;font-size:.92rem;line-height:1.4}
.hr-detail{font-size:.85rem;color:var(--cream-dim)}
.hr-detail summary{cursor:pointer;min-height:24px}
.hr-actions{display:flex;gap:8px;margin-top:auto}

/* États : bordure, étiquette et couleur (jamais la couleur seule) */
.hr-node.is-actif{border-color:var(--gold-bright);border-left-width:6px}
.hr-node.is-actif .hr-rang{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--panel);font-weight:700}
.hr-node.is-max{border-style:double;border-width:4px}
.hr-node.is-max .hr-rang::after{content:" · max"}
.hr-node.is-verrouille{border-style:dashed;background:transparent;color:var(--cream-dim)}
.hr-node.is-verrouille h3{color:var(--cream-dim)}
.hr-node.is-verrouille .hr-node-head{cursor:not-allowed}
.hr-node.is-verrouille .hr-rang::after{content:" · verrouillé"}
.hr-node.is-plein .hr-node-head{cursor:not-allowed}
.hr-node:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}

/* Emplacements annoncés par Blizzard */
.hr-node.hr-inconnu{align-self:start;border-style:dotted;background:transparent;color:var(--cream-dim)}
.hr-node.hr-inconnu h3{color:var(--cream-dim);font-weight:400}

/* Boutons − et + (cibles tactiles ≥ 40 px) */
.hr-btn{min-width:40px;min-height:40px;padding:0 12px;border:1px solid var(--bronze-dim);border-radius:6px;background:var(--panel);color:var(--cream);font:inherit;font-size:1.3rem;line-height:1;cursor:pointer}
.hr-btn:hover:not([aria-disabled="true"]){border-color:var(--gold-bright);color:var(--gold-bright)}
.hr-btn:focus-visible{outline:3px solid var(--gold-bright);outline-offset:2px}
.hr-btn[aria-disabled="true"]{border-style:dashed;color:var(--cream-dim);cursor:not-allowed}
.hr-tools .btn{min-height:40px}

/* Panneau de résumé */
.hr-resume{padding:14px 16px;background:var(--panel);border:1px solid var(--bronze-dim);border-radius:6px;min-width:0}
.hr-resume h2{margin:0 0 10px;color:var(--gold-bright);font-size:1.2rem}
.hr-resume ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:10px}
.hr-resume li{line-height:1.45}
.hr-resume-arbre{color:var(--cream-dim)}
.hr-vide{margin:0;color:var(--cream-dim)}

/* Adaptations */
@media (max-width:1000px){.hr-layout{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .hr-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .hr-c0,.hr-c1,.hr-c2,.hr-c3{grid-row:auto}
  .hr-l0,.hr-l1,.hr-l2,.hr-l3{grid-column:auto}
}
@media (max-width:640px){
  .hr-grid{grid-template-columns:minmax(0,1fr)}
  .hr-bar{padding:6px 12px}
  .hr-message{font-size:.9rem}
  .hr-tree{padding:12px 10px 14px}
}
@media (prefers-reduced-motion:no-preference){
  .hr-node,.hr-btn{transition:border-color .15s,background-color .15s,color .15s}
}