/* Page « Hiérarchie des Rolands » : quatre onglets (Cités, Milices, Armées, Grades), seigneurs dépliables, grades en tableau.
   Onglets sans JavaScript (cases radio) ; assets/js/onglets.js ne sert qu'à ouvrir le bon onglet depuis le sommaire ou un lien. */
.region { font: 700 12px Helvetica, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6b4a12; }
.hier-statuts { columns: 2 200px; }

.hier-radio { position: absolute; opacity: 0; pointer-events: none; }
.hier-barre { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 0; border-bottom: 3px solid #3b2a10; }
.hier-barre label { flex: 1 1 100px; padding: 10px 14px; text-align: center; cursor: pointer; font: 700 15px Helvetica, Arial, sans-serif; background: #b9ad86; border: 2px solid #3b2a10; border-bottom: 0; border-radius: 6px 6px 0 0; color: #2b1d07; }
.hier-radio:focus-visible ~ .hier-barre { outline: 3px solid #e0b85c; }
.hier-panneau { display: none; padding: 16px 4px 4px; }
#o-cites:checked ~ .hier-cites, #o-milices:checked ~ .hier-milices, #o-armees:checked ~ .hier-armees, #o-grades:checked ~ .hier-grades { display: block; }
#o-cites:checked ~ .hier-barre .hier-l-cites, #o-milices:checked ~ .hier-barre .hier-l-milices, #o-armees:checked ~ .hier-barre .hier-l-armees, #o-grades:checked ~ .hier-barre .hier-l-grades { background: #f1e8ca; box-shadow: 0 3px 0 #f1e8ca; position: relative; top: 3px; }
.hier-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 8px; margin: 12px 0; }
.hier-grille div { padding: 10px 14px; background: rgba(255,255,255,.4); border: 1px solid rgba(60,40,10,.4); border-left: 5px solid #8a5a12; }
.hier-def { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 12px 0; border: 2px solid #6b5220; background: rgba(255,255,255,.3); }
.hier-def dt { padding: 12px 16px; font: 700 15px Georgia, serif; background: #d6c78e; border-bottom: 1px solid rgba(60,40,10,.3); }
.hier-def dd { margin: 0; padding: 12px 16px; border-bottom: 1px solid rgba(60,40,10,.3); text-align: left; }
.hier-seig { margin: 10px 0; background: linear-gradient(#f1e8ca, #dccf9f); border: 2px solid #6b5220; box-shadow: 0 2px 3px rgba(0,0,0,.3); }
.hier-seig summary { cursor: pointer; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.hier-seig[open] summary { background: linear-gradient(#5b4a26, #3b2f14); color: #fff6d8; } .hier-seig[open] summary .region { color: #ffd889; }
.hier-seig > div { padding: 6px 16px 14px; } .hier-seig p { text-align: left; }
.hier-gen { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hier-gen li { flex: 1 1 220px; padding: 6px 12px; font-weight: 700; font-size: 14px; background: rgba(255,255,255,.45); border: 1px solid rgba(60,40,10,.35); border-left: 5px solid #3f6f8a; }
.hier-chaine { padding: 10px 16px; background: rgba(255,255,255,.35); border-left: 5px solid #8a5a12; text-align: left; }
.hier-tableau { width: 100%; border-collapse: collapse; margin: 14px 0; background: rgba(255,255,255,.3); }
.hier-tableau th, .hier-tableau td { padding: 10px 14px; border: 1px solid rgba(60,40,10,.4); vertical-align: top; text-align: left; }
.hier-tableau thead th { background: #5b4a26; color: #fff6d8; }
.hier-tableau tbody th { width: 150px; background: #d6c78e; font: 700 15px Georgia, serif; }
.hier-tableau .pleine td { background: #e9dfb8; }
.hier-tableau tbody tr:nth-child(even) td { background: rgba(255,255,255,.25); }

@media (max-width: 860px) {
  .hier-def { grid-template-columns: 1fr; } .hier-def dt { border-bottom: 0; padding-bottom: 2px; }
  .hier-tableau, .hier-tableau tbody, .hier-tableau tr, .hier-tableau th, .hier-tableau td { display: block; width: 100% !important; }
  .hier-tableau thead { display: none; }
}