/* Cycles de saga */
.cycle-section-heading { align-items: end; margin-top: 42px; }
.cycle-section-heading > div { display: grid; gap: 3px; }
.cycle-section-heading .eyebrow { margin: 0; }
.watch-cycle-list { display: grid; gap: 18px; margin-bottom: 44px; }
.watch-cycle-card { position: relative; isolation: isolate; overflow: hidden; padding: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: #11141a center 28%/cover; box-shadow: 0 18px 45px rgba(0,0,0,.24); }
.watch-cycle-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(9,10,14,.98) 0%, rgba(9,10,14,.91) 54%, rgba(9,10,14,.72)), linear-gradient(0deg, rgba(9,10,14,.92), transparent 65%); backdrop-filter: blur(1px); }
.watch-cycle-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.watch-cycle-head h3 { margin: 4px 0 7px; font-size: clamp(1.5rem,3vw,2.4rem); letter-spacing: -.04em; }
.watch-cycle-head p:last-child { margin: 0; color: var(--muted); font-size: .78rem; }
.watch-cycle-head > strong { color: var(--gold); font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.watch-cycle-progress { height: 5px; margin: 18px 0 22px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.1); }
.watch-cycle-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--red),var(--gold)); }
.watch-cycle-members { display: grid; grid-auto-columns: minmax(138px, 168px); grid-auto-flow: column; gap: 11px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-color: rgba(255,255,255,.18) transparent; }
.cycle-member { min-width: 0; display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 9px; padding: 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(15,17,22,.82); }
.cycle-member > a { width: 54px; height: 78px; overflow: hidden; border-radius: 6px; background: #24272e; }
.cycle-member > a img, .cycle-member > a .poster-placeholder { width: 100%; height: 100%; object-fit: cover; }
.cycle-member > div { min-width: 0; display: flex; flex-direction: column; align-items: start; }
.cycle-member span { color: #ff9da2; font-size: .48rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.cycle-member.completed span { color: #79e4ad; }
.cycle-member.planned span { color: #8fb3ff; }
.cycle-member.skipped { opacity: .55; }
.cycle-member strong { width: 100%; margin-top: 5px; overflow: hidden; font-size: .67rem; line-height: 1.25; text-overflow: ellipsis; }
.cycle-member small { margin-top: 3px; color: var(--muted); font-size: .52rem; }
.cycle-member .mini-button { margin-top: auto; padding: 3px 6px; font-size: .48rem; }
.watch-cycle-actions { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.watch-cycle-actions > div:first-child { display: grid; gap: 3px; }
.watch-cycle-actions span { color: var(--muted); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.watch-cycle-actions strong { font-size: .88rem; }
.watch-cycle-actions > div:last-child { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.cycle-ribbon { position: absolute; z-index: 3; right: 10px; bottom: 10px; padding: 5px 8px; border-radius: 999px; background: #315fad; color: #fff; box-shadow: 0 5px 16px rgba(0,0,0,.28); font-size: .52rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.history-cycle-status { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px 14px; margin: 18px 0 0; padding: 12px 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.025); }
.history-cycle-status span { color: #8fb3ff; font-size: .55rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.history-cycle-status span.completed { color: #79e4ad; }
.history-cycle-status span.cancelled { color: var(--muted); }
.history-cycle-status strong { font-size: .78rem; }
.history-cycle-status small { color: var(--muted); font-size: .62rem; }

.history-draw.is-transitioning { will-change: height; }
.history-draw.is-transitioning > summary { pointer-events: none; }
.history-draw.is-transitioning .history-body { animation: none; }

/* Tirages : état vide compact et historique plus lisible */
#openDraws > .empty-panel {
  min-height: 150px;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: stretch;
  gap: 3px 16px;
  padding: 22px 26px;
  text-align: left;
}
#openDraws > .empty-panel > span {
  grid-row: 1 / 3;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(229,9,20,.09);
  color: #ff7d84;
  font-size: 1.55rem;
}
#openDraws > .empty-panel h2 { margin: 0; font-size: 1.05rem; }
#openDraws > .empty-panel p { font-size: .75rem; line-height: 1.45; }

.history-kicker { font-size: .66rem; }
.history-summary-copy h3 { font-size: 1rem; }
.history-summary-copy p { font-size: .72rem; }
.history-result, .history-expand { font-size: .72rem; }
.history-round > header > div span { font-size: .75rem; }
.history-round > header > div strong { font-size: .66rem; }
.history-round-number { font-size: .68rem !important; }
.history-match-label > span { font-size: .6rem !important; }
.history-match-label small { font-size: .6rem; }
.history-match-label strong { font-size: .7rem; }
.history-match > header > b { font-size: .62rem; }
.history-choice h4 { font-size: .78rem; }
.history-choice p { font-size: .68rem; }
.history-outcome { font-size: .6rem; }
.history-choice.loser { opacity: .82; }
.history-voters .no-voters {
  max-width: 82px;
  font-size: .66rem !important;
  line-height: 1.25;
}
.history-voters .voter-detail-label {
  height: 28px;
  padding-inline: 8px;
  font-size: .62rem;
}
.history-actions {
  flex-wrap: wrap;
  gap: 10px;
}
.history-actions .button {
  min-height: 40px;
  padding: 9px 14px;
  font-size: .75rem;
}
.history-cycle-status span { font-size: .64rem; }
.history-cycle-status strong { font-size: .86rem; }
.history-cycle-status small { font-size: .7rem; }
.history-load-more p { font-size: .7rem; }
.history-load-more p strong { font-size: .78rem; }
.history-load-more .button { min-height: 40px; font-size: .72rem; }

.logout-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cycle-modal-shell { width: min(980px, calc(100vw - 28px)); }
.cycle-preview { min-height: 150px; display: flex; align-items: center; gap: 18px; margin-bottom: 16px; padding: 18px; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: linear-gradient(90deg,rgba(8,9,12,.95),rgba(8,9,12,.5)); background-position: center; background-size: cover; }
.cycle-preview > div { flex: 0 0 76px; height: 108px; overflow: hidden; border-radius: 8px; background: #252831; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.cycle-preview img, .cycle-preview .poster-placeholder { width: 100%; height: 100%; object-fit: cover; }
.cycle-preview > span { display: grid; gap: 6px; }
.cycle-preview strong { font-size: clamp(1.25rem,3vw,2rem); }
.cycle-preview small { color: var(--muted); }
.cycle-selection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 10px; }
.cycle-selection-toolbar > div:first-child { display: grid; gap: 3px; }
.cycle-selection-toolbar strong { font-size: .78rem; }
.cycle-selection-toolbar span { color: var(--muted); font-size: .61rem; }
.cycle-selection-toolbar > div:last-child { display: flex; gap: 7px; }
.cycle-movie-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: 390px; overflow-y: auto; padding-right: 4px; }
.cycle-draft-movie { display: grid; grid-template-columns: auto 24px 52px minmax(0,1fr); align-items: center; gap: 9px; padding: 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.025); cursor: pointer; transition: border-color .16s,background .16s,opacity .16s; }
.cycle-draft-movie.selected { border-color: rgba(229,9,20,.42); background: rgba(229,9,20,.06); }
.cycle-draft-movie:not(.selected) { opacity: .48; }
.cycle-draft-movie input { accent-color: var(--red); }
.cycle-draft-order { color: var(--muted-2); font-size: .58rem; font-weight: 900; }
.cycle-draft-poster { width: 52px; height: 74px; overflow: hidden; border-radius: 6px; background: #252831; }
.cycle-draft-poster img, .cycle-draft-poster .poster-placeholder { width: 100%; height: 100%; object-fit: cover; }
.cycle-draft-copy { min-width: 0; display: grid; gap: 4px; }
.cycle-draft-copy strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.cycle-draft-copy small { color: var(--muted); font-size: .55rem; line-height: 1.35; }
.cycle-draft-copy b { width: max-content; padding: 3px 6px; border-radius: 999px; background: rgba(245,196,81,.11); color: var(--gold); font-size: .46rem; letter-spacing: .06em; text-transform: uppercase; }
.cycle-custom-search { margin-top: 16px; padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.025); }
.cycle-custom-search h3 { margin: 0; font-size: 1rem; }
.cycle-custom-search > div > p:last-child { margin: 6px 0 13px; color: var(--muted); font-size: .67rem; }
.cycle-search-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.cycle-search-results article { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; background: rgba(255,255,255,.035); }
.cycle-search-results article > span { width: 38px; height: 54px; overflow: hidden; border-radius: 4px; }
.cycle-search-results img, .cycle-search-results .poster-placeholder { width: 100%; height: 100%; object-fit: cover; }
.cycle-search-results article > div { min-width: 0; display: grid; gap: 2px; }
.cycle-search-results strong { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.cycle-search-results small { color: var(--muted); font-size: .52rem; }
.cycle-import-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 16px; }
.cycle-import-options label { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 9px; padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.025); }
.cycle-import-options input { margin-top: 3px; accent-color: var(--red); }
.cycle-import-options span { display: grid; gap: 3px; }
.cycle-import-options strong { font-size: .68rem; }
.cycle-import-options small { color: var(--muted); font-size: .56rem; line-height: 1.4; }

@media (max-width: 720px) {
  .watch-cycle-card { padding: 17px; }
  .watch-cycle-head > strong { font-size: 1.25rem; }
  .watch-cycle-actions { align-items: stretch; flex-direction: column; }
  .watch-cycle-actions > div:last-child { justify-content: stretch; }
  .watch-cycle-actions .button { flex: 1; justify-content: center; }
  .cycle-movie-list, .cycle-search-results, .cycle-import-options { grid-template-columns: 1fr; }
  .cycle-selection-toolbar { align-items: stretch; flex-direction: column; }
  .cycle-selection-toolbar > div:last-child { flex-wrap: wrap; }
  .history-cycle-status { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 560px) {
  #openDraws > .empty-panel {
    min-height: 124px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 2px 12px;
    padding: 17px;
  }
  #openDraws > .empty-panel > span { width: 42px; height: 42px; font-size: 1.25rem; }
  .history-actions { flex-direction: column; }
}