/* Les Compagnies d'Aubemont (compagnie.js). Préfixe cg-.
   Un registre d'armes : l'écu en majesté, la lice de la Joute, la jauge de l'Ost comme un siège. */

.cg-app { width: min(100% - 32px, 960px); margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 0 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cg-tete { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
.cg-retour { display: grid; place-items: center; width: 40px; height: 40px; color: var(--serment); }
.cg-retour svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-titre h1 { margin: 0; font: 600 clamp(1.7rem, 6vw, 2.4rem)/1 var(--titre); color: var(--serment); }
.cg-sur { margin: 0; font: 400 .72rem/1.2 var(--etiquette); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-att); }
.cg-onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--filet); overflow-x: auto; }
.cg-onglets button { min-height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--encre-att); font: 600 1.05rem/1 var(--titre); cursor: pointer; white-space: nowrap; }
.cg-onglets button[aria-selected="true"] { color: var(--serment); border-bottom-color: var(--serment); }
.cg-onglets button:focus-visible { outline: 2px solid var(--serment); outline-offset: -2px; }
.cg-alerte { margin: 0; padding: 10px 12px; border: 1px solid var(--danger); background: rgba(212, 84, 74, .1); }
.cg-message { margin: 0; padding: 10px 12px; border: 1px solid rgba(240, 217, 160, .4); background: rgba(240, 217, 160, .06); }
.cg-vide { color: var(--encre-att); font-style: italic; text-align: center; padding: 24px 0; }
.cg-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cg-corps > *, .cg-section > *, .cg-carte > * { min-width: 0; }
.cg-champ select, .cg-champ input { width: 100%; }
.cg-texte { margin: 0; line-height: 1.5; color: var(--encre); }
.cg-mini { margin: 0; font-size: .82rem; color: var(--encre-att); }
.cg-carte, .cg-section { display: grid; gap: 10px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--filet); }
.cg-section h2, .cg-carte h2 { margin: 0; font: 600 1.25rem/1.2 var(--titre); color: var(--serment); }
.cg-section h2 .num { margin-left: 6px; font: 400 .85rem/1 var(--texte); color: var(--encre-att); }
.cg-lien { padding: 4px 6px; background: none; border: 0; color: var(--serment); font: inherit; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cg-lien--danger { color: var(--danger); }
.cg-lien:focus-visible { outline: 2px solid var(--serment); outline-offset: 2px; }
.bouton.cg-petit { min-height: 40px; padding: 0 14px; font-size: .85rem; }

/* L'écu (skins.js, ecu) : un blason taillé en écu */
.sk-ban--ecu { position: relative; display: block; clip-path: path('M0 0H120V46C120 66 96 78 60 80C24 78 0 66 0 46Z'); }
.cg-ecu-grand { width: 132px; height: 88px; flex: none; }
.cg-ecu-moyen { width: 78px; height: 52px; flex: none; }
.cg-ecu-mini { width: 36px; height: 24px; flex: none; }
.sk-ban--ecu svg { width: 100%; height: 100%; display: block; }

.cg-blason { display: flex; gap: 16px; align-items: center; padding: 16px; border: 1px solid rgba(240, 217, 160, .35);
  background: radial-gradient(ellipse 60% 120% at 0% 50%, rgba(240, 217, 160, .1), transparent 70%), var(--surface); }
.cg-blason-texte { display: grid; gap: 4px; min-width: 0; }
.cg-blason h2 { margin: 0; font: 600 clamp(1.3rem, 5vw, 1.8rem)/1.1 var(--titre); color: var(--serment); }
.cg-devise { margin: 0; font: italic 500 1.05rem/1.3 var(--titre); color: var(--encre); }
.cg-blasonnement { margin: 0; font: italic 400 .85rem/1.3 var(--titre); color: var(--encre-att); }
.cg-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 0; font-size: .82rem; color: var(--encre-att); }

.cg-membres { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cg-membre { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: rgba(11, 8, 9, .45); border: 1px solid rgba(240, 217, 160, .08); flex-wrap: wrap; }
.cg-fanion { position: relative; width: 26px; height: 36px; flex: none; }
.cg-membre-corps { display: grid; gap: 2px; flex: 1; min-width: 120px; }
.cg-membre-corps b { font: 600 1rem/1.1 var(--titre); }
.cg-en-ligne { color: var(--vie); }
.cg-membre-renom { min-width: 3ch; text-align: right; color: var(--serment); }

.cg-cris { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-cri { padding: 7px 10px; color: var(--encre); background: rgba(11, 8, 9, .5); border: 1px solid rgba(240, 217, 160, .2); font: inherit; font-size: .85rem; cursor: pointer; }
.cg-cri:hover, .cg-cri:focus-visible { border-color: rgba(240, 217, 160, .6); color: var(--serment); }
.cg-journal { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.cg-journal li { padding: 4px 0; border-bottom: 1px solid rgba(240, 217, 160, .06); }

/* La lice de la Joute */
.cg-lice { display: grid; gap: 8px; }
.cg-camp { display: grid; grid-template-columns: minmax(80px, 30%) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.cg-camp-nom { font: 600 .95rem/1.15 var(--titre); }
.cg-jauge { height: 10px; background: rgba(5, 3, 4, .9); box-shadow: inset 0 0 0 1px var(--filet); overflow: hidden; }
.cg-jauge span { display: block; height: 100%; width: calc(var(--v, 0) * 100%); background: linear-gradient(90deg, #8A5E16, #F2C46B); transition: width .6s ease; }
.cg-camp--eux .cg-jauge span { background: linear-gradient(90deg, #4A2A6A, #C77BC0); }

/* L'éditeur d'écu */
.cg-editeur { display: grid; gap: 12px; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.cg-editeur-apercu { display: grid; gap: 6px; justify-items: center; max-width: 160px; }
.cg-editeur-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cg-champ { display: grid; gap: 4px; font-size: .82rem; color: var(--encre-att); }
.cg-champ select, .cg-champ input, .cg-recherche input {
  min-height: 44px; padding: 0 10px; color: var(--encre); background: #0B0809; border: 1px solid var(--filet); font: inherit; font-size: .95rem;
}
.cg-champ select:focus-visible, .cg-champ input:focus-visible, .cg-recherche input:focus-visible { outline: 2px solid var(--serment); outline-offset: 2px; }
.cg-nom-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.cg-nom-final { margin: 0; font: 600 1.25rem/1.2 var(--titre); color: var(--serment); }
.cg-acces { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.cg-acces legend { margin-bottom: 4px; font-size: .82rem; color: var(--encre-att); }
.cg-acces label { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 519px) { .cg-editeur { grid-template-columns: minmax(0, 1fr); justify-items: center; } .cg-editeur-choix { width: 100%; } }

/* L'Ost : un siège */
.cg-ost { display: grid; gap: 10px; padding: 18px 16px; border: 1px solid rgba(200, 66, 58, .5);
  background: radial-gradient(ellipse 80% 120% at 50% 0%, rgba(200, 66, 58, .16), transparent 70%), #120B0B; }
.cg-ost h2 { margin: 0; font: 600 clamp(1.5rem, 5.5vw, 2.2rem)/1.1 var(--titre); color: #F2B8A8; }
.cg-ost.tombee h2 { text-decoration: line-through; text-decoration-color: rgba(242, 184, 168, .6); }
.cg-ost-etat { margin: 0; font-style: italic; }
.cg-ost-pv { position: relative; height: 18px; margin-top: 6px; }
.cg-ost-barre { position: absolute; inset: 0; background: rgba(5, 3, 4, .9); box-shadow: inset 0 0 0 1px rgba(200, 66, 58, .5); overflow: hidden; }
.cg-ost-barre span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--v, 0)); background: linear-gradient(90deg, #6E1A16, #D4544A 70%, #F2C46B); transition: transform .8s ease; }
.cg-ost-palier { position: absolute; top: -4px; bottom: -4px; left: calc(var(--p) * 100%); width: 2px; margin-left: -1px; background: rgba(240, 217, 160, .5); }
.cg-ost-palier.atteint { background: #F2C46B; box-shadow: 0 0 8px #F2C46B; }
.cg-ost-chiffres { margin: 0; font-size: .9rem; color: var(--encre-att); }
.cg-ost-chiffres b { color: var(--encre); }
.cg-paliers { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cg-paliers li { display: flex; gap: 12px; align-items: center; padding: 6px 8px; background: rgba(11, 8, 9, .45); border: 1px solid rgba(240, 217, 160, .08); }
.cg-paliers li b { min-width: 48px; font: 600 1.05rem/1 var(--titre); color: var(--encre-att); }
.cg-paliers li.atteint b { color: #F2C46B; }
.cg-paliers svg { width: 16px; height: 16px; vertical-align: -3px; }
.cg-classements { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cg-classement h3 { margin: 0 0 6px; font: 600 1.05rem/1.2 var(--titre); color: var(--serment); }
.cg-classement ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: rang; }
.cg-classement li { display: flex; align-items: center; gap: 8px; counter-increment: rang; }
.cg-classement li::before { content: counter(rang); min-width: 1.4em; color: var(--encre-att); font: 600 .9rem/1 var(--titre); }
.cg-classement li span { flex: 1; min-width: 0; font-size: .9rem; }

/* L'Annuaire */
.cg-recherche { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.cg-ligne { display: flex; gap: 8px; }
.cg-ligne input { flex: 1; min-width: 0; width: 100%; }
.cg-annuaire { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cg-fiche { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--surface); border: 1px solid var(--filet); }
.cg-fiche-corps { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cg-fiche h3 { margin: 0; font: 600 1.1rem/1.15 var(--titre); color: var(--serment); }
@media (max-width: 519px) { .cg-fiche { flex-wrap: wrap; } }