/* Page d'un monde ouvert, /mondes/<id>/ (lot M2, D-606 ; maquette monde.css du lot M, vue 7).
   Le ciel teinté de chaque monde couvre la page sous l'en-tête : dégradé du monde à 65 % sur le ciel de la carte,
   le même rendu que le ciel de la maquette posé à .35 au-dessus du dégradé. Aucun style en ligne. */

.monde-haut { background: #0D0C28; }
.monde-fond { background: #14142A; color: var(--texte); }
@supports selector(:has(a)) {
  .monde-haut, .monde-fond { background: none; }
  body:has(.monde-fond.t-aether) { background: linear-gradient(rgba(28, 46, 98, .65), rgba(62, 92, 154, .65) 70%, rgba(110, 140, 196, .65)) fixed, #0D0C28 url("../img/ciel-carte.webp") center / cover no-repeat fixed; }
  body:has(.monde-fond.t-depart) { background: linear-gradient(rgba(16, 38, 28, .65), rgba(30, 58, 42, .65) 60%, rgba(62, 106, 74, .65)) fixed, #0D0C28 url("../img/ciel-carte.webp") center / cover no-repeat fixed; }
  body:has(.monde-fond.t-lune) { background: linear-gradient(rgba(20, 20, 42, .65), rgba(42, 42, 68, .65) 65%, rgba(74, 74, 110, .65)) fixed, #0D0C28 url("../img/ciel-carte.webp") center / cover no-repeat fixed; }
  body:has(.monde-fond) { image-rendering: pixelated; }
  body:has(.monde-fond) main, body:has(.monde-fond) .pied, body:has(.monde-fond) .barre, body:has(.monde-fond) .tete { image-rendering: auto; }
}

.dimension { display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 32px; padding-top: 18px; padding-bottom: 56px; align-items: stretch; }
.dimension .vue { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding-top: 30px; }
.dimension .vue > img { width: 280px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 18px 0 rgba(8, 7, 24, .35)); }
.plan { margin: 0; width: 460px; max-width: 100%; }
.plan img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 4px var(--contour), 0 10px 0 0 rgba(8, 7, 24, .4); }
.plan figcaption { margin-top: 12px; font-size: 13px; color: var(--texte2); }
.fil-ariane { position: absolute; left: 0; top: 0; margin: 0; font: 800 14px/1 var(--corps); color: var(--texte2); }
.fil-ariane a { color: var(--texte); display: inline-block; padding: 6px 0; margin: -6px 0; }
.fil-ariane a:focus-visible { outline: 3px solid var(--gratuit); outline-offset: 4px; }

.fiche { align-self: center; background: var(--panneau); color: var(--encre); padding: 26px 28px 24px;
  box-shadow: 0 -4px 0 0 var(--contour), 0 4px 0 0 var(--contour), -4px 0 0 0 var(--contour), 4px 0 0 0 var(--contour), 0 12px 0 0 rgba(8, 7, 24, .45); }
.fiche .surtitre { margin: 0 0 6px; font: 800 13px/1 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: #8A4F08; }   /* or foncé : 5,7:1 sur le panneau (--or-sombre : 3,5:1) */
.fiche h1 { font-size: 46px; color: var(--encre); }
.fiche .chapo { margin: 8px 0 18px; color: var(--encre2); font-size: 16px; }
.fiche .recit { margin: -6px 0 18px; font-size: 15px; line-height: 1.6; color: var(--encre); }
.fiche .recit a { color: var(--encre); text-decoration-color: var(--or-sombre); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fiche .recit a:focus-visible { outline: 3px solid #1F6FA8; outline-offset: 2px; }
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--encart); color: var(--texte); box-shadow: 0 0 0 3px var(--contour); margin-bottom: 18px; }
.chiffres div { padding: 10px 12px 12px; }
.chiffres div + div { box-shadow: inset 2px 0 0 0 #3A4256; }
.chiffres b { display: block; font: 400 26px/1 var(--titre); color: var(--accent); }
.chiffres span { font-size: 13px; color: var(--texte2); }
.fiche h2 { font: 800 13px/1 var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--encre2); margin: 0 0 8px; }
.fiche h1 + h2 { margin-top: 14px; }
.fil { margin: 0 0 16px; font-size: 16px; }
.fil b { font-family: var(--titre); font-weight: 400; font-size: 19px; }
.noms { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.noms li { font: 800 14px/1 var(--corps); padding: 6px 9px 7px; background: #FFFFFF; box-shadow: 0 0 0 2px var(--contour); }
.donjons { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 6px; }
.donjons li { display: grid; grid-template-columns: 20px 92px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 10px 8px; background: var(--panneau-bas); font-size: 15px; }
.donjons i { width: 16px; height: 16px; box-shadow: 0 0 0 2px var(--contour); }
.donjons .bronze i { background: #C27A3A; }
.donjons .argent i { background: #C9CED8; }
.donjons .or i { background: var(--or); }
.donjons b { font-weight: 800; }
.fiche .actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fiche .actions .note { margin-left: auto; font-size: 13px; color: var(--encre2); text-align: right; }
.voisins { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 0; padding-top: 14px; box-shadow: inset 0 2px 0 0 var(--panneau-bas); font: 800 14px/1.3 var(--corps); }
.voisins a { color: var(--encre); display: inline-block; padding: 13px 0; margin: -13px 0; min-height: 44px; min-width: 44px; box-sizing: border-box; }
.voisins .suivant { margin-left: auto; text-align: right; }

@media (max-width: 1100px) { .dimension { grid-template-columns: minmax(0, 1fr) 520px; } }
@media (max-width: 900px) {
  .plan { width: 100%; }
  .dimension { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 4px; padding-bottom: 32px; }
  .dimension .vue { padding-top: 0; gap: 14px; }
  .fil-ariane { position: static; align-self: flex-start; }
  .dimension .vue > img { width: 180px; }
  .fiche { padding: 20px 18px 20px; }
  .fiche h1 { font-size: 38px; }
  .chiffres b { font-size: 22px; }
  .chiffres span { font-size: 12px; }
  .donjons li { grid-template-columns: 16px 74px minmax(0, 1fr); gap: 8px; font-size: 14px; }
  .fiche .actions .btn { flex: 1 1 auto; }
  .fiche .actions .note { display: none; }
}