/* Contrôles de réponse. Couleurs fournies par la page hôte : --c-field, --c-line, --c-accent, --c-on-accent, --c-ink, --c-soft. */
.flag { flex: none; width: 36px; height: 24px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--c-line); }
.flag svg { display: block; width: 100%; height: 100%; }
.choice.has-flag { display: flex; align-items: center; gap: 12px; }
.ctl-error { color: var(--c-accent); font-weight: 700; font-size: 15px; }
.ctl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ctl-input { width: 100%; min-height: 54px; padding: 10px 16px; background: var(--c-field); border: 1px solid var(--c-line); border-radius: 10px; color: var(--c-ink); font: inherit; }
.ctl-input:focus { border-color: var(--c-accent); outline: none; }
.ctl-input::placeholder { color: var(--c-soft); }

.docdate { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px; }
.docdate-part { display: flex; flex-direction: column; gap: 4px; }
.docdate-part span { color: var(--c-soft); font-size: 14px; font-weight: 700; }
.docdate select { padding-inline: 8px; font-size: 16px; font-variant-numeric: tabular-nums; }

.msg { padding: 12px 16px; border-inline-start: 3px solid var(--c-accent); background: var(--c-field); border-radius: 10px; line-height: 1.8; }

.cal { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--c-field); border: 1px solid var(--c-line); border-radius: 12px; }
.cal-head { display: grid; grid-template-columns: 44px minmax(0, 1.3fr) minmax(0, 1fr) 44px; gap: 6px; align-items: center; }
.cal-select { min-height: 44px; padding: 4px 8px; font-weight: 700; color: var(--c-ink); }
.cal-nav { width: 44px; height: 44px; padding: 0; background: none; border: 1px solid var(--c-line); border-radius: 10px; color: var(--c-ink); font-size: 24px; line-height: 1; }
.cal-nav:hover:not(:disabled) { border-color: var(--c-accent); }
.cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-week { text-align: center; color: var(--c-soft); font-size: 12px; line-height: 2; }
.cal-day { min-height: 44px; padding: 0; background: none; border: 1px solid transparent; border-radius: 10px; color: var(--c-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-day:hover:not(:disabled) { border-color: var(--c-accent); }
.cal-day:disabled { opacity: 0.25; cursor: not-allowed; }
.cal-day.today { border-color: var(--c-line); }
.cal-day[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.cal-chosen { color: var(--c-soft); font-size: 15px; }

.month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.month-btn { min-height: 48px; padding: 4px; background: none; border: 1px solid var(--c-line); border-radius: 10px; color: var(--c-ink); font-weight: 700; }
.month-btn:hover:not(:disabled) { border-color: var(--c-accent); }
.month-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.month-btn[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }

.country-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.country-grid .choice { padding-inline: 10px; gap: 8px; }
.country-grid .flag { width: 30px; height: 20px; }
.chip-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.chip { text-align: center; font-variant-numeric: tabular-nums; }

.stepper { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px; background: var(--c-field); border: 1px solid var(--c-line); border-radius: 12px; }
.stepper-btn { width: 56px; height: 56px; padding: 0; background: none; border: 1px solid var(--c-line); border-radius: 12px; color: var(--c-ink); font-size: 26px; line-height: 1; }
.stepper-btn:hover { border-color: var(--c-accent); }
.stepper-value { min-width: 56px; text-align: center; font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; }

.with-unit { display: flex; align-items: center; gap: 10px; }
.with-unit .ctl-input { flex: 1; min-width: 0; }
.unit { flex: none; color: var(--c-soft); font-weight: 700; }
.tel-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
.dial { padding-inline: 6px; font-size: 16px; }
.ctl-input.long { min-height: 110px; resize: vertical; line-height: 1.7; }

@media (max-width: 480px) {
  .cal { padding: 8px; }
}
@media (max-width: 340px) {
  .country-grid { grid-template-columns: minmax(0, 1fr); }
  .tel-row { grid-template-columns: minmax(0, 1fr); }
}