/* Page « Dro'Xun » : onglets (Société, Hiérarchie, Armée Sombre), cartes des maisons et des unités.
   Onglets sans JavaScript (cases radio) ; assets/js/onglets.js ouvre le bon onglet depuis une ancre. */
.dx-liens { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 16px; }
.dx-liens a { padding: 6px 12px; font: 700 12px Helvetica, Arial, sans-serif; text-decoration: none; color: #15110a; background: linear-gradient(rgba(255,253,240,.85), rgba(214,198,150,.6)); border: 1px solid rgba(60,40,10,.5); border-left: 5px solid #3a3a48; border-radius: 3px; }
.dx-liens a:hover { background: #fff6d8; }
.dx-radio { position: absolute; opacity: 0; pointer-events: none; }
.dx-barre { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 3px solid #23202e; }
.dx-l { flex: 1 1 110px; padding: 10px 14px; text-align: center; cursor: pointer; font: 700 15px Helvetica, Arial, sans-serif; color: #e7e2f0; background: #4a4560; border: 2px solid #23202e; border-bottom: 0; border-radius: 6px 6px 0 0; }
.dx-radio:focus-visible ~ .dx-barre { outline: 3px solid #e0b85c; }
.dx-panneau { display: none; padding: 16px 2px 4px; }
#o-societe:checked ~ .dx-societe, #o-hierarchie:checked ~ .dx-hierarchie, #o-armee:checked ~ .dx-armee { display: block; }
#o-societe:checked ~ .dx-barre .dx-l-societe, #o-hierarchie:checked ~ .dx-barre .dx-l-hierarchie, #o-armee:checked ~ .dx-barre .dx-l-armee { background: #f1e8ca; color: #1c150a; position: relative; top: 3px; box-shadow: 0 3px 0 #f1e8ca; }

.dx-carte, .dx-maison, .dx-unite { position: relative; background: linear-gradient(#f1e8ca, #dccf9f); border: 2px solid #6b5220; box-shadow: 0 2px 3px rgba(0,0,0,.3), 0 8px 18px -8px rgba(30,20,4,.55); }
.dx-carte { padding: 14px 20px 16px; }
.dx-carte h3, .dx-maison h4, .dx-unite h4 { margin: 0 0 6px; padding: 0; border: 0; font: 400 28px/1.15 var(--script); color: #3b2a10; text-shadow: 1px 1px 0 rgba(255,255,255,.55); text-align: left; }
.dx-carte h3::before, .dx-carte h3::after { display: none; }
.dx-carte p, .dx-maison p, .dx-unite p { margin: 0 0 8px; text-align: left !important; font-size: 15px; line-height: 1.55; }
.dx-cartes-soc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; margin: 0 0 16px; }
.dx-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.dx-intro { max-width: 800px; margin: 0 auto 12px; text-align: left !important; }
.dx-maisons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; margin: 0 0 24px; }
.dx-maison { padding: 14px 18px 14px; }
.dx-maison header { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.dx-maison h4 { margin: 0; }
.dx-principale { border-top: 8px solid #7a5a12; }
.dx-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font: 700 16px Georgia, serif; color: #3b2a10; background: radial-gradient(circle at 35% 30%, #fff1b8, #e0b85c 55%, #9a6a1a); border: 2px solid #3b2a10; box-shadow: inset 0 -2px 3px rgba(0,0,0,.3), 0 2px 3px rgba(0,0,0,.4); }
.dx-etiquette { margin: 6px 0 4px !important; font: 700 11px Helvetica, Arial, sans-serif !important; letter-spacing: .1em; text-transform: uppercase; color: #6b4a12; }
.dx-membres { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dx-membres li { padding: 3px 10px; font-size: 13px; background: rgba(255,255,255,.5); border: 1px solid rgba(60,40,10,.35); border-left: 4px solid #3a3a48; }
.dx-unites { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin: 6px 0 16px; }
.dx-unite { padding: 14px 18px 12px 62px; }
.dx-unite .dx-num { position: absolute; left: 16px; top: 16px; }
.dx-unite h4 { font-size: 26px; }
.dx-pied { max-width: 800px; margin: 0 auto; text-align: center !important; font-style: italic; }
@media (max-width: 560px) { .dx-unite { padding-left: 58px; } .dx-l { font-size: 14px; padding: 9px 6px; } }