/* Mise en page « tout sur un écran » : stream + panneau don, sans défilement (desktop) */
body.onepage { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.op-bar { display: flex; align-items: center; gap: 18px; padding: 10px 16px; border-bottom: 2px solid var(--filet-sombre); }
.op-bar .logo-gd { width: 70px; color: var(--rouge); }
.op-bar-sp { flex: 1; }
.op-bar .on-skyline { font-size: 18px; opacity: .8; }

.op-main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; padding: 12px; min-height: 0; }

/* Le lecteur garde son 16/9 et remplit la place disponible */
.op-stage { container-type: size; min-height: 0; display: flex; align-items: center; justify-content: center; }
.op-stage .player { width: min(100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9; }

.op-side { display: flex; flex-direction: column; min-height: 0; background: var(--papier); color: var(--noir); }

.op-counter { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; background: var(--rouge); color: var(--blanc); padding: 14px 16px 10px; position: relative; }
.op-counter::before { content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 6px; background: var(--papier); }
.op-counter .mention { color: var(--blanc); font-size: 12px; }
.op-counter .sub { font-family: var(--display); letter-spacing: .25em; font-size: 13px; margin-top: 8px; }
.op-counter .total { font-size: clamp(44px, 4.2vw, 64px); color: var(--noir); text-align: right; }

.op-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 2px solid var(--filet); }
.op-tab { font-family: var(--display); letter-spacing: .12em; font-size: 16px; padding: 12px 4px 8px; background: none; border: 0; cursor: pointer; color: var(--gris); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.op-tab[aria-selected="true"] { color: var(--noir); border-bottom-color: var(--rouge); }
.op-tab:focus-visible { outline: 2px solid var(--bleu); outline-offset: -2px; }

.op-panel { flex: 1; min-height: 0; overflow-y: auto; }
.op-panel[data-panel="don"] { padding: 14px 16px 16px; }
#don-form { display: flex; flex-direction: column; gap: 10px; }
#don-form .chips { margin: 0; gap: 6px; }
#don-form .chip { font-size: 24px; padding: 10px 0 7px; }
#don-form .input { padding: 10px 12px; font-size: 15px; }
#don-form .input.amount { font-size: 26px; padding: 8px 12px 4px; }
#don-form textarea.input { min-height: 0; resize: none; }
#don-form .form-error { margin: 0; min-height: 0; }
#don-form .form-error:empty { display: none; }
#don-form .btn { width: 100%; font-size: 26px; padding: 14px 16px 11px; }
#don-form .hint { margin: 0; }
#don-form .closed-note { margin: 0; }

.op-panel.feed { margin: 0; }
.op-chat { position: relative; }
.op-chat .chat { position: absolute; inset: 0; height: auto; min-height: 0; border: 0; }

body.onepage .ticker { padding: 6px 0 2px; }
body.onepage .ticker-track span { font-size: 28px; }

/* Mobile / tablette : on empile et la page défile normalement */
@media (max-width: 960px) {
  body.onepage { height: auto; overflow: auto; display: block; }
  .op-main { grid-template-columns: 1fr; }
  .op-stage { container-type: normal; display: block; }
  .op-stage .player { width: 100%; }
  .op-panel { overflow: visible; }
  .op-chat { height: 460px; }
}
@media (max-width: 480px) {
  .op-bar .live-pill { display: none; }
  #don-form .chips { grid-template-columns: repeat(5, 1fr); }
  #don-form .chip { font-size: 20px; }
}

/* Épuré */
.op-side { border-top: 4px solid var(--rouge); }
.op-tabs { grid-template-columns: repeat(2, 1fr); }
.op-title { font-size: clamp(40px, 3.6vw, 56px); margin-bottom: 16px; }
.op-title .r { color: var(--rouge); }
#don-form .hint { color: var(--gris); }
.modal-head .display { font-size: 30px; }
#amount::-webkit-outer-spin-button, #amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#amount { -moz-appearance: textfield; appearance: textfield; }
#don-form .chip { font-size: 21px; white-space: nowrap; }
.amount-group { display: flex; align-items: stretch; }
.amount-group .cur { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 48px; background: var(--noir); color: var(--blanc); font-family: var(--display); font-size: 26px; padding-top: 3px; }
.amount-group .input.amount { flex: 1; min-width: 0; border-left: 0; }

/* Bords arrondis de l'espace don */
.op-side { border-radius: 14px; overflow: hidden; }
#don-form .chip, #don-form .input, #don-form .btn, #don-form .closed-note { border-radius: 8px; }
.amount-group .cur { border-radius: 8px 0 0 8px; }
.amount-group .input.amount { border-radius: 0 8px 8px 0 !important; }

/* Confirmation / remerciement */
.thanks .thanks-kicker { font-family: var(--display); letter-spacing: .3em; font-size: 14px; color: var(--rouge); margin: 0 0 8px; }
.thanks h3 { font-size: 52px; overflow-wrap: anywhere; }
.thanks .thanks-amount { font-size: 64px; color: var(--rouge); margin-top: 10px; line-height: .9; }
.thanks .thanks-text { max-width: 34ch; margin: 14px auto 0; }
.receipt { margin: 20px auto 0; max-width: 320px; text-align: left; border-top: 1px solid var(--filet-sombre); }
.receipt div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--filet-sombre); font-size: 13px; }
.receipt dt { color: rgba(250, 250, 250, .6); }
.receipt dd { font-family: ui-monospace, Menlo, monospace; text-align: right; overflow-wrap: anywhere; }
.thanks .star { animation: breathe 3s ease-in-out infinite; }
.modal-box { border-radius: 14px; }
.state .btn { border-radius: 8px; }
.field-label { font-family: var(--display); letter-spacing: .18em; font-size: 15px; color: var(--noir2); margin: 4px 0 -4px; }