/* Droits Divins UI Kit · les armoiries d'une personne (bible 31). Le dessin vient de ui-kit/js/armoiries.js. */

.dd-armoiries { width: 100%; margin: 0; display: grid; justify-items: center; gap: var(--dd-s2); }
.dd-armoiries__scene { position: relative; width: 100%; }
.dd-armoiries--grand .dd-armoiries__scene { max-width: 340px; }
.dd-armoiries--moyen .dd-armoiries__scene { max-width: 220px; }
.dd-armoiries__scene > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }

/* La devise, en capitales romaines, sur le listel */
.dd-armoiries__devise {
  position: absolute; display: flex; align-items: center; justify-content: center;
  overflow: hidden; white-space: nowrap;
  font-family: var(--dd-font-titre); font-size: var(--dd-t-petit); font-weight: 600; line-height: 1;
  letter-spacing: .12em; color: #3b2a16;
}
.dd-armoiries__devise.is-serre { font-size: var(--dd-t-note); letter-spacing: .04em; }
.dd-armoiries.is-devise-dessous .dd-armoiries__devise { display: none; }
.dd-armoiries__traduction {
  margin: 0; max-width: 34ch; text-align: center;
  font-family: var(--dd-font-titre); font-size: var(--dd-t-petit); font-style: italic; line-height: 1.35; color: var(--dd-texte-muet);
}
.dd-armoiries__latin { display: none; font-style: normal; font-weight: 600; letter-spacing: .08em; color: var(--dd-texte); }
.dd-armoiries.is-devise-dessous .dd-armoiries__latin { display: inline; }

/* L'écu seul, à côté d'un nom ou d'un portrait */
.dd-ecu {
  display: inline-block; flex: none; height: 44px; aspect-ratio: 600 / 790; vertical-align: middle;
  filter: drop-shadow(0 1px 1px rgba(17, 12, 6, .3));
}
.dd-ecu > img, .dd-ecu > svg { display: block; width: 100%; height: 100%; }
.dd-ecu--petit { height: 28px; }
.dd-ecu--grand { height: 72px; }

/* L'écu, niveau par niveau */
.dd-armoiries-echelle {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dd-s3) var(--dd-s2);
}
.dd-armoiries-echelle__pas { display: grid; justify-items: center; align-content: start; gap: 2px; padding-top: var(--dd-s4); text-align: center; }
.dd-armoiries-echelle__dessin { position: relative; display: block; width: 100%; max-width: 168px; }
.dd-armoiries-echelle__dessin > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dd-armoiries-echelle__pas b { font-size: var(--dd-t-note); line-height: 1.3; color: var(--dd-texte); }
.dd-armoiries-echelle__pas > span:last-child { font-size: var(--dd-t-note); line-height: 1.3; color: var(--dd-texte-muet); }
.dd-armoiries-echelle__pas.dd-verrou::after { top: 0; right: 50%; transform: translateX(50%); white-space: nowrap; }

/* Les ornements, chacun avec sa raison */
.dd-ornements { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dd-s2); }
.dd-ornements > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: var(--dd-s2); }
.dd-ornements__img { display: grid; place-items: center; width: 40px; height: 40px; }
.dd-ornements__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dd-ornements b { display: block; font-size: var(--dd-t-petit); line-height: 1.3; color: var(--dd-texte); }
.dd-ornements .dd-note { display: block; }

/* Ce que chaque autorité peut accorder */
.dd-armoiries-autorite { border-top: 1px solid var(--dd-filet); }
.dd-armoiries-autorite:last-of-type { border-bottom: 1px solid var(--dd-filet); }
.dd-armoiries-autorite > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--dd-s2);
  padding: var(--dd-s2) 0; cursor: pointer; list-style: none;
  font-family: var(--dd-font-ui); font-size: var(--dd-t-corps); font-weight: 600; color: var(--dd-texte);
}
.dd-armoiries-autorite > summary::-webkit-details-marker { display: none; }
.dd-armoiries-autorite > summary::after { content: "+"; font-weight: 700; color: var(--dd-texte-muet); }
.dd-armoiries-autorite[open] > summary::after { content: "\2212"; }
.dd-armoiries-autorite > summary > .dd-note { margin-left: auto; }
.dd-armoiries-autorite > summary:focus-visible { outline: 2px solid var(--dd-indigo); outline-offset: 2px; }
.dd-armoiries-autorite > .dd-ornements { padding-bottom: var(--dd-s3); }

/* Le blasonnement, lu comme un texte d'Armorial */
.dd-blasonnement { margin: 0; font-family: var(--dd-font-titre); font-size: var(--dd-t-corps); font-style: italic; line-height: 1.45; color: var(--dd-texte); }