/* Veillée — page Réglages en trois colonnes (lot 3-1 de la refonte, B-VEI-105). Mise en page issue de la démonstration validée par Benoit ;
 * échelle 2/4/8/12/16, textes 11/13/14 (tokens.css), composants vs- de base.css. Élément racine : .settings-grid.rg-grid.vs-root. */
.settings-grid.rg-grid { padding: 0; }

.rg-head { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--row-h); }
.rg-head .vs-title { flex: none; }
.rg-head .rg-monde { display: inline-flex; align-items: center; gap: var(--sp-3); flex: none; }
.settings-grid.rg-grid > .rg-head { grid-column: 1 / -1; }
.rg-head .vs-status { flex: 1; min-width: 0; text-align: right; }
.settings-grid.rg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); margin-top: var(--sp-3); align-items: start; }
.rg-col { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.rg-coltitle { display: flex; align-items: baseline; gap: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--green); }
.rg-coltitle .vs-small { font-weight: 400; }
.rg-block { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--vs-radius-panel); background: var(--surface); min-width: 0; }
.rg-bh { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--row-h); user-select: none; }
.rg-bh .vs-title { flex: 1; min-width: 0; cursor: default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-bh .vs-title::before, .rg-sub > .vs-row::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--sp-3); background: var(--muted); clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform var(--dur-fast) var(--ease-out); transform: rotate(90deg);
}
.rg-bh[aria-expanded="false"] .vs-title::before, .rg-sub.is-folded > .vs-row::before { transform: none; }
.rg-bh .vs-small { flex: none; }
.rg-bh .vs-dot { flex: none; }
.rg-block.is-folded > .rg-bb { display: none; }
.rg-bb { display: grid; gap: var(--sp-2); min-width: 0; }
.rg-block .vs-field { grid-template-columns: 176px minmax(0, 1fr); }
.rg-block .vs-field > label, .rg-block .vs-field > .vs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rg-block .vs-select, .rg-block .vs-input { width: 100%; }
.rg-block .vs-range { display: flex; width: 100%; }
.rg-block .vs-range input[type=range] { flex: 1; width: auto; min-width: 0; }
.rg-block .vs-check { min-width: 0; }
.rg-inline { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.rg-inline .vs-select, .rg-inline .vs-input { flex: 1; }
.rg-inline strong { font-weight: 600; }
.rg-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); }
.rg-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.rg-mini { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-2); min-width: 0; }
.rg-mini .vs-input { padding: 0 var(--sp-2); }
.rg-mini .vs-select { padding-left: var(--sp-2); }
.rg-mini .vs-range input[type=range] { min-width: 0; }
.rg-mini .vs-range output { min-width: 24px; }
.rg-plh, .rg-prow { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 1fr) 32px; gap: var(--sp-3); align-items: center; }
.rg-plh { padding: 0 var(--sp-3); height: var(--lh-small); }
.rg-plh .vs-small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-prow.vs-row { display: grid; }
.rg-prow .vs-check { min-height: 0; justify-self: center; }
.rg-prow.is-off > span { color: var(--muted); }
.rg-lrow.vs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.rg-list.vs-panel { max-height: none; overflow: visible; }
.rg-sub { display: grid; gap: var(--sp-2); }
.rg-sub > .vs-row { cursor: pointer; font-weight: 600; }
.rg-sub.is-folded > .rg-sb { display: none; }
.rg-sb { display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3) var(--sp-5); }
.rg-fx { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) 24px 22px; gap: var(--sp-2); align-items: center; }
.rg-fx .vs-select { padding-left: var(--sp-2); }
.rg-pj { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.rg-pj .vs-field { grid-template-columns: 80px minmax(0, 1fr); }
.rg-portrait { width: 80px; height: 104px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--vs-radius-panel); overflow: hidden;
  background: linear-gradient(170deg, var(--green-soft), color-mix(in srgb, var(--green) 35%, var(--surface))); color: var(--green); font: 600 var(--fs-title)/var(--lh-title) var(--theme-title-font, inherit); }
.rg-portrait.is-empty { background: var(--paper); color: var(--muted); }
.rg-color { width: var(--field-h); height: var(--field-h); padding: 0; border: 1px solid var(--line); border-radius: var(--vs-radius); background: var(--surface); }
.rg-banner { position: fixed; z-index: 9500; left: 50%; bottom: var(--sp-5); transform: translateX(-50%); display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); max-width: calc(100vw - 16px);
  border: 1px solid var(--line); border-radius: var(--vs-radius-panel); background: var(--surface); box-shadow: var(--vs-shadow-pop); animation: vs-win-in var(--dur-window) var(--ease-out) both; }
.rg-banner output { min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.rg-banner i { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--green); width: 100%; transform-origin: 0 0; animation: rg-count 10s linear both; }
@keyframes rg-count { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.rg-err { color: var(--copper); }
.rg-win { display: grid; gap: var(--sp-3); min-width: 320px; max-width: 360px; }
.rg-win p { margin: 0; }
.rg-win ul { margin: 0; padding: 0 0 0 var(--sp-5); }
.is-solo.rg-grid { grid-template-columns: minmax(0, 560px); }
.is-solo .rg-coltitle { display: none; }
@media (max-width: 1100px) { .settings-grid.rg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .settings-grid.rg-grid { grid-template-columns: minmax(0, 1fr); }
  .rg-head { flex-wrap: wrap; }
  .rg-head .vs-status { flex-basis: 100%; text-align: left; }
  .rg-block .vs-field { grid-template-columns: 112px minmax(0, 1fr); }
  .rg-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-win { min-width: 0; max-width: calc(100vw - 32px); }
  .rg-banner { flex-wrap: wrap; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .rg-banner, .rg-banner i { animation: none; } .rg-bh .vs-title::before, .rg-sub > .vs-row::before { transition: none; } }

/* Composants existants réutilisés tels quels dans un bloc (code MJ, synchronisation) : titres et phrases d'introduction déjà portés par l'en-tête du bloc. */
.rg-block > .rg-bb > .panel, .rg-block > .rg-bb > section.panel { border: 0; box-shadow: none; background: transparent; padding: 0; margin: 0; }
.rg-block .settings-panel-title, .rg-block .settings-panel-intro { display: none; }
.rg-block .panel .button, .rg-block .panel button.button { min-height: var(--btn-h); height: var(--btn-h); padding: 0 var(--sp-3); font-size: var(--fs-base); line-height: var(--lh-base); }
.rg-block .panel input, .rg-block .panel select { height: var(--field-h); font-size: var(--fs-base); }
.rg-block .panel { display: grid; gap: var(--sp-2); }
.rg-block .panel p, .rg-block .panel .hint, .rg-block .settings-status { font-size: var(--fs-small); line-height: var(--lh-small); margin: 0; }
.rg-block > .rg-bb > .panel.dice-settings-host, .rg-block .dice-settings, .rg-block .configuration-card { max-width: 100%; }
.rg-block .dice-settings select, .rg-block .dice-settings input:not([type=checkbox]):not([type=range]) { height: var(--field-h); }
.rg-bh .vs-title { font-family: var(--theme-title-font, inherit); }
.rg-block .status-line { display: grid; grid-template-columns: 176px minmax(0, 1fr); align-items: center; min-height: var(--row-h); gap: var(--sp-3); }
.rg-block .status-line > span { color: var(--muted); }
.rg-block .local-listen { height: var(--btn-h); }
.rg-win .vs-win__foot { display: flex; justify-content: flex-end; gap: var(--sp-3); }
.rg-list ul { max-height: none; }
.rg-prow { cursor: default; }
.rg-prow[aria-selected="true"] { background: var(--green-soft); }
/* Le corps réserve déjà 78 px pour la barre du bas : sans cette correction la page dépasse la fenêtre de 78 px et un ascenseur apparaît. */
html[data-page=settings] .layout { min-height: calc(100vh - 156px); }
html[data-page=settings] .workspace { padding: var(--sp-4) var(--sp-5); }