/* Capture flash — page joueur /capture (templates/capture/index.html.twig,
   assets/controllers/capture_controller.js). Classes x-*, portées depuis la
   maquette validée (06/11/2026), sur les variables de couleur du site.

   La page garde la palette « isla » quel que soit le thème : sur le thème
   clair, son conteneur devient un îlot sombre (`media-dark`, cf. app.css) avec
   son propre fond — les cartes ont des bruns écrits en dur, elles seraient
   illisibles sur le parchemin. */
.x-page {
  --x-b: #5b97dc; --x-b-soft: rgba(91, 151, 220, .16);
  --x-r: var(--color-hibiscus, #d9523a); --x-r-soft: rgba(217, 82, 58, .16);
  --x-gold: var(--color-gold, #d4a24c); --x-amber: var(--color-amber, #e8b04a);
  --x-bone: var(--color-bone, #e8d9b5); --x-bark: var(--color-bark, #3a281b);
  --x-umber: var(--color-umber, #241710); --x-sienna: var(--color-sienna, #2f1f15); --x-cacao: var(--color-cacao, #1a110a);
  --x-fern: var(--color-fern, #6bbf52);
  --x-ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
html[data-theme="light"] .x-page { background: #1a110a; padding-bottom: 24px; }
.x-muted { color: rgba(232, 217, 181, .6); }
.x-empty { padding: 28px 18px; text-align: center; font: 15px/1.5 var(--x-ui); color: rgba(232, 217, 181, .65); }
.x-msg { font: 13.5px/1.45 var(--x-ui); padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(217, 82, 58, .45); background: rgba(217, 82, 58, .12); color: #f0a595; }
.x-msg:empty { display: none; }
.x-msg.ok { border-color: rgba(107, 191, 82, .4); background: rgba(74, 157, 58, .12); color: #a6d895; }
.x-round.void { opacity: .6; }
.x-chip.void { border-style: dashed; }
.x-ring.is-idle .x-ring-fg { stroke-dashoffset: 326.7; }


/* Face-à-face */
.x-duel { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 440px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(212, 162, 76, .25); }
.x-side { position: relative; overflow: hidden; }
.x-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.x-side.b .x-img { transform: scaleX(-1); object-position: 30% 50%; }
.x-tint { position: absolute; inset: 0; }
.x-side.b .x-tint { background: linear-gradient(90deg, rgba(14, 26, 44, .55), rgba(26, 17, 10, .92) 92%), linear-gradient(0deg, rgba(91, 151, 220, .35), transparent 60%); }
.x-side.r .x-tint { background: linear-gradient(270deg, rgba(44, 14, 10, .55), rgba(26, 17, 10, .92) 92%), linear-gradient(0deg, rgba(217, 82, 58, .35), transparent 60%); }
.x-side-body { position: absolute; bottom: 22px; display: grid; gap: 6px; }
.x-side.b .x-side-body { left: 24px; } .x-side.r .x-side-body { right: 24px; text-align: right; justify-items: end; }
.x-team-lbl { font-size: clamp(28px, 4vw, 44px); letter-spacing: .06em; line-height: 1; }
.x-side.b .x-team-lbl { color: var(--x-b); } .x-side.r .x-team-lbl { color: var(--x-r); }
.x-team-n { font: 500 14px var(--x-ui); color: rgba(232, 217, 181, .75); }
.x-team-n b { font-size: 20px; color: var(--x-bone); }
.x-avatars { display: flex; }
.x-avatars i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--x-cacao); margin-left: -6px; display: block; font: 600 10px/20px var(--x-ui); text-align: center; color: var(--x-cacao); font-style: normal; }
.x-avatars i:first-child { margin-left: 0; }
.x-side.b .x-avatars i { background: var(--x-b); } .x-side.r .x-avatars i { background: var(--x-r); }
.x-center { position: absolute; inset: 0; margin: auto; width: min(440px, 92%); height: max-content; padding: 22px 22px 18px; display: grid; justify-items: center; gap: 12px; text-align: center;
  background: radial-gradient(ellipse at top, rgba(232, 176, 74, .10), transparent 65%), rgba(26, 17, 10, .78); border: 1px solid rgba(212, 162, 76, .35); border-radius: 16px; backdrop-filter: blur(6px); box-shadow: 0 30px 60px -30px #000; }
.x-pill { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px var(--x-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--x-fern); border: 1px solid rgba(107, 191, 82, .4); background: rgba(74, 157, 58, .12); border-radius: 999px; padding: 4px 11px; }
.x-live { width: 7px; height: 7px; border-radius: 50%; background: var(--x-fern); }
@media (prefers-reduced-motion: no-preference) { .x-live { animation: x-pulse 1.6s infinite; } @keyframes x-pulse { 50% { opacity: .3; } } }
.x-ring { position: relative; width: 132px; height: 132px; }
.x-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.x-ring circle { fill: none; stroke-width: 7; }
.x-ring-bg { stroke: rgba(232, 217, 181, .1); }
.x-ring-fg { stroke: url(#none); stroke: var(--x-amber); stroke-linecap: round; stroke-dasharray: 326.7; transition: stroke-dashoffset 1s linear; }
.x-ring-txt { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; }
.x-ring-lbl { font: 500 11px var(--x-ui); letter-spacing: .2em; text-transform: uppercase; color: rgba(232, 217, 181, .55); }
.x-ring-t { font-size: 34px; line-height: 1; color: var(--x-amber); }
.x-title { margin: 0; font-size: clamp(24px, 3vw, 32px); color: var(--x-bone); letter-spacing: .03em; }
.x-title span { font-size: .6em; color: rgba(232, 217, 181, .5); }
.x-fill { width: 100%; display: grid; gap: 6px; }
.x-fill-bar { position: relative; height: 8px; border-radius: 4px; background: rgba(232, 217, 181, .1); overflow: visible; }
.x-fill-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, var(--x-b), var(--x-amber), var(--x-r)); transition: width .4s; }
.x-min { position: absolute; top: -4px; bottom: -4px; left: 25%; width: 2px; background: var(--x-bone); border-radius: 1px; opacity: .7; }
.x-fill-legend { display: flex; justify-content: space-between; gap: 10px; font: 12.5px var(--x-ui); color: rgba(232, 217, 181, .6); }
.x-fill-legend b { color: var(--x-bone); }
.x-cta, .x-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px var(--x-ui); letter-spacing: .02em; border-radius: 12px; padding: 12px 26px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .15s, filter .15s; }
.x-cta, .x-btn.go { background: linear-gradient(180deg, var(--x-amber), var(--x-gold)); color: var(--x-cacao); box-shadow: 0 10px 24px -12px rgba(232, 176, 74, .7); }
.x-cta:hover, .x-btn.go:hover:not([disabled]) { filter: brightness(1.06); transform: translateY(-1px); }
.x-btn.go[disabled] { cursor: not-allowed; background: var(--x-bark); color: rgba(232, 217, 181, .45); box-shadow: none; }
.x-btn.ghost { background: transparent; color: rgba(232, 217, 181, .8); border-color: var(--x-bark); }
.x-btn.ghost:hover { border-color: rgba(212, 162, 76, .5); }
.x-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font: 12.5px var(--x-ui); color: rgba(232, 217, 181, .6); }
.x-facts b { color: var(--x-bone); }
@media (max-width: 760px) {
  .x-duel { grid-template-columns: 1fr 1fr; min-height: 0; }
  .x-side { min-height: 150px; }
  .x-center { position: relative; grid-column: 1 / -1; inset: auto; width: auto; margin: 0; border-radius: 0; border: 0; border-top: 1px solid rgba(212, 162, 76, .25); }
  .x-side-body { bottom: 12px; } .x-side.b .x-side-body { left: 14px; } .x-side.r .x-side-body { right: 14px; }
}

/* Mise en page */
.x-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 28px; align-items: start; }
@media (max-width: 1080px) { .x-layout { grid-template-columns: 1fr; } .x-rail { order: -1; } }
.x-main { display: grid; gap: 28px; min-width: 0; scroll-margin-top: 20px; }
.x-rail { display: grid; gap: 16px; position: sticky; top: calc(16px + env(safe-area-inset-top, 0px)); min-width: 0; }
@media (max-width: 1080px) { .x-rail { position: static; } .x-sum { display: none; } }
.x-card { border-radius: 14px; border: 1px solid var(--x-bark); background: rgba(36, 23, 16, .6); padding: 18px; }

/* Fil d'étapes */
.x-stepper { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border-radius: 14px; border: 1px solid var(--x-bark); background: rgba(26, 17, 10, .7); position: sticky; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 4; backdrop-filter: blur(6px); }
.x-stepbtn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; font: 600 14px var(--x-ui); color: rgba(232, 217, 181, .55); background: transparent; border: 0; border-radius: 10px; padding: 9px 8px; cursor: pointer; }
.x-stepbtn:disabled { cursor: default; }
.x-dot { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-content: center; font: 700 12px var(--x-ui); border: 1.5px solid rgba(232, 217, 181, .3); flex: none; }
.x-stepper li.is-now .x-stepbtn { color: var(--x-bone); background: rgba(232, 176, 74, .1); }
.x-stepper li.is-now .x-dot { border-color: var(--x-amber); color: var(--x-amber); }
.x-stepper li.is-done .x-stepbtn { color: rgba(232, 217, 181, .85); }
.x-stepper li.is-done .x-dot { background: var(--x-fern); border-color: var(--x-fern); color: var(--x-cacao); }
@media (max-width: 420px) { .x-stepbtn span:last-child { display: none; } }

/* Panneaux */
.x-panel { display: grid; gap: 16px; scroll-margin-top: 80px; transition: opacity .25s; }
.x-panel.is-locked { opacity: .45; }
.x-panel.is-locked .x-grid, .x-panel.is-locked .x-confirm { pointer-events: none; }
.x-phead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.x-phead > div:nth-child(2) { flex: 1 1 auto; }

/* Équipes */
.x-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .x-teams { grid-template-columns: 1fr; } }
.x-team { position: relative; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 14px; border: 2px solid var(--x-bark); background: rgba(36, 23, 16, .6); padding: 18px; display: grid; gap: 12px; transition: border-color .2s, background .2s, transform .15s; }
.x-team:hover:not([disabled]) { transform: translateY(-2px); }
.x-team.b:hover:not([disabled]) { border-color: rgba(91, 151, 220, .55); }
.x-team.r:hover:not([disabled]) { border-color: rgba(217, 82, 58, .55); }
.x-team[aria-pressed="true"].b { border-color: var(--x-b); background: linear-gradient(180deg, var(--x-b-soft), rgba(36, 23, 16, .6)); }
.x-team[aria-pressed="true"].r { border-color: var(--x-r); background: linear-gradient(180deg, var(--x-r-soft), rgba(36, 23, 16, .6)); }
.x-team[disabled] { cursor: not-allowed; opacity: .6; }
.x-team-top { display: flex; justify-content: space-between; align-items: center; }
.x-tn { font-size: 28px; letter-spacing: .05em; line-height: 1; }
.x-team.b .x-tn { color: var(--x-b); } .x-team.r .x-tn { color: var(--x-r); }
.x-check { width: 26px; height: 26px; border-radius: 50%; display: grid; place-content: center; font: 700 14px var(--x-ui); color: var(--x-cacao); background: var(--x-amber); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.x-team[aria-pressed="true"] .x-check { opacity: 1; transform: none; }
.x-seats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.x-seat { aspect-ratio: 1; max-width: 100%; border-radius: 4px; background: rgba(232, 217, 181, .08); }
.x-team.b .x-seat.on { background: var(--x-b); } .x-team.r .x-seat.on { background: var(--x-r); }
.x-seat.me { box-shadow: 0 0 0 2px var(--x-amber); }
.x-team-meta { display: flex; justify-content: space-between; gap: 10px; font: 13px var(--x-ui); color: rgba(232, 217, 181, .65); flex-wrap: wrap; }
.x-team-state { font: 13px var(--x-ui); color: rgba(232, 217, 181, .5); min-height: 1.3em; }
.x-team-state.warn { color: var(--x-amber); }
.x-balance { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; align-items: center; }
@media (max-width: 520px) { .x-balance { grid-template-columns: 1fr; } }
.x-tug { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--x-b) 0 50%, var(--x-r) 50% 100%); opacity: .9; }
.x-tug i { position: absolute; top: -5px; width: 4px; height: 18px; border-radius: 2px; background: var(--x-bone); box-shadow: 0 0 0 2px var(--x-cacao); transform: translateX(-50%); transition: left .3s; }
.x-balance p { font-size: 16px; color: rgba(232, 217, 181, .7); margin: 0; }

/* Espèces */
.x-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.x-filters button { font: 600 12.5px var(--x-ui); color: rgba(232, 217, 181, .7); background: transparent; border: 1px solid var(--x-bark); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.x-filters button[aria-pressed="true"] { color: var(--x-cacao); background: var(--x-gold); border-color: var(--x-gold); }
.x-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.x-sp { position: relative; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--x-bark); background: var(--x-umber); display: grid; transition: border-color .2s, transform .15s, box-shadow .2s; min-width: 0; }
.x-sp:hover:not([disabled]) { transform: translateY(-2px); border-color: rgba(212, 162, 76, .55); }
.x-sp[aria-pressed="true"] { border-color: var(--x-amber); box-shadow: 0 0 0 2px var(--x-amber), 0 14px 30px -18px rgba(232, 176, 74, .8); }
.x-sp-img { position: relative; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; background: var(--x-sienna); }
.x-sp-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.x-sp:hover .x-sp-img img { transform: scale(1.05); }
.x-sp-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(36, 23, 16, .95), transparent 55%); }
.x-sp-body { position: relative; margin-top: -26px; padding: 0 12px 12px; display: grid; gap: 6px; z-index: 1; }
.x-sp-nm { font: 600 15px var(--x-ui); color: var(--x-bone); overflow-wrap: anywhere; }
.x-sp-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; font: 12px var(--x-ui); color: rgba(232, 217, 181, .55); flex-wrap: wrap; }
.x-diet { font: 700 10.5px var(--x-ui); letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; border: 1px solid; }
.x-diet.c { color: #ef8b74; border-color: rgba(217, 82, 58, .5); background: rgba(217, 82, 58, .15); }
.x-diet.h { color: var(--x-fern); border-color: rgba(107, 191, 82, .45); background: rgba(74, 157, 58, .15); }
.x-diet.o { color: #e0bf55; border-color: rgba(200, 156, 26, .5); background: rgba(200, 156, 26, .15); }
.x-sp-tick { position: absolute; top: 8px; right: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-content: center; font: 700 14px var(--x-ui); color: var(--x-cacao); background: var(--x-amber); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.x-sp[aria-pressed="true"] .x-sp-tick { opacity: 1; transform: none; }
.x-sp[disabled] { cursor: not-allowed; }
.x-sp[disabled] .x-sp-img img { filter: grayscale(1) brightness(.5); }
.x-sp-why { font: 600 10.5px var(--x-ui); letter-spacing: .08em; text-transform: uppercase; color: rgba(232, 217, 181, .55); }
.x-locked { border-radius: 12px; border: 1px dashed var(--x-bark); padding: 4px 14px; }
.x-locked[open] { padding-bottom: 14px; }
.x-locked summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; padding: 10px 0; font: 600 14px var(--x-ui); color: rgba(232, 217, 181, .75); list-style: none; }
.x-locked summary::-webkit-details-marker { display: none; }
.x-sum-hint { color: var(--x-gold); font-weight: 500; }
.x-locked > p { font-size: 16px; margin: 0 0 12px; }
.x-grid-locked { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* Confirmation */
.x-confirm { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 18px; border-radius: 14px; border: 1px solid var(--x-bark); background: rgba(36, 23, 16, .6); padding: 18px; }
@media (max-width: 640px) { .x-confirm { grid-template-columns: 1fr; } }
.x-pass { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(212, 162, 76, .35); background: var(--x-umber); display: grid; }
.x-pass img { width: 100%; aspect-ratio: 16 / 10; max-width: 100%; object-fit: cover; display: block; }
.x-pass-body { padding: 12px 14px 14px; display: grid; gap: 4px; }
.x-pass-team { font: 700 11px var(--x-ui); letter-spacing: .16em; text-transform: uppercase; }
.x-pass-team.b { color: var(--x-b); } .x-pass-team.r { color: var(--x-r); }
.x-pass-sp { font-size: 22px; color: var(--x-bone); line-height: 1.1; }
.x-pass-empty { display: grid; place-content: center; min-height: 200px; text-align: center; padding: 16px; font: 14px var(--x-ui); color: rgba(232, 217, 181, .5); }
.x-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.x-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font: 14px/1.45 var(--x-ui); color: rgba(232, 217, 181, .8); }
.x-checks li::before { content: "✓"; width: 22px; height: 22px; border-radius: 50%; display: grid; place-content: center; font: 700 12px var(--x-ui); color: var(--x-cacao); background: var(--x-fern); }
.x-checks li.later::before { content: "·"; background: var(--x-bark); color: var(--x-bone); }
.x-checks small { display: block; color: rgba(232, 217, 181, .5); font-size: 12.5px; }
.x-consent { display: flex; gap: 10px; align-items: flex-start; font: 14px/1.45 var(--x-ui); color: rgba(232, 217, 181, .85); cursor: pointer; padding: 12px; border-radius: 10px; background: rgba(26, 17, 10, .6); border: 1px solid var(--x-bark); }
.x-consent input { margin-top: 3px; accent-color: var(--x-amber); width: 16px; height: 16px; flex: none; }
.x-cside { display: grid; gap: 14px; align-content: start; }
.x-cside .x-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.x-hint { font: 13px var(--x-ui); color: rgba(232, 217, 181, .55); }
.x-done { display: grid; gap: 6px; }
.x-done h3 { margin: 0; font-size: 22px; color: var(--x-fern); }
.x-next { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font: 13.5px var(--x-ui); color: rgba(232, 217, 181, .75); }
.x-next b { color: var(--x-amber); font-variant-numeric: tabular-nums; margin-right: 6px; }
@keyframes x-pop { from { transform: scale(.96); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) { .x-confirm.pop { animation: x-pop .35s ease; } }

/* Récapitulatif */
.x-sum { display: grid; gap: 14px; border-color: rgba(212, 162, 76, .4); }
.x-sum-h { font: italic 500 14px var(--font-serif, Georgia, serif); letter-spacing: .2em; text-transform: uppercase; color: rgba(212, 162, 76, .75); }
.x-sum-rows { display: grid; gap: 8px; }
.x-sum-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 10px; background: rgba(26, 17, 10, .6); border: 1px solid var(--x-bark); }
.x-sum-row.empty { opacity: .6; border-style: dashed; }
.x-sum-ico { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; display: grid; place-content: center; font: 700 16px var(--x-ui); color: var(--x-cacao); }
.x-sum-ico img { width: 100%; height: 100%; object-fit: cover; }
.x-sum-ico.b { background: var(--x-b); } .x-sum-ico.r { background: var(--x-r); } .x-sum-ico.none { background: var(--x-bark); color: rgba(232, 217, 181, .5); }
.x-sum-k { font: 11.5px var(--x-ui); letter-spacing: .1em; text-transform: uppercase; color: rgba(232, 217, 181, .5); }
.x-sum-v { font: 600 15px var(--x-ui); color: var(--x-bone); overflow-wrap: anywhere; }
.x-sum .x-btn { width: 100%; }
.x-rosters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.x-roster h3 { margin: 0 0 8px; font-size: 18px; }
.x-roster.b h3 { color: var(--x-b); } .x-roster.r h3 { color: var(--x-r); }
.x-roster ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.x-roster li { display: grid; gap: 1px; font: 12.5px/1.3 var(--x-ui); padding: 6px 8px; border-radius: 8px; background: rgba(26, 17, 10, .6); border: 1px solid transparent; min-width: 0; }
.x-roster li .p { color: var(--x-bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.x-roster li .s { color: rgba(232, 217, 181, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-roster li.you { border-color: var(--x-amber); }
.x-roster li .you-tag { color: var(--x-amber); font-weight: 600; }

/* FAQ */
.x-faq { display: grid; gap: 8px; }
.x-faq .x-phead { margin-bottom: 6px; }
.x-faq details { border-radius: 12px; border: 1px solid var(--x-bark); background: rgba(36, 23, 16, .6); padding: 0 16px; }
.x-faq summary { cursor: pointer; padding: 14px 0; font: 600 15px var(--x-ui); color: var(--x-bone); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.x-faq summary::-webkit-details-marker { display: none; }
.x-faq summary::after { content: "+"; color: var(--x-gold); font-weight: 400; font-size: 20px; line-height: 1; }
.x-faq details[open] summary::after { content: "−"; }
.x-faq details p { margin: 0 0 14px; font: 14.5px/1.55 var(--x-ui); color: rgba(232, 217, 181, .75); max-width: 70ch; }

/* Barre d'action, téléphone */
.x-mbar { display: none; }
@media (max-width: 1080px) {
  .x-mbar { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(26, 17, 10, .96); border-top: 1px solid rgba(212, 162, 76, .4); font: 13.5px var(--x-ui); color: rgba(232, 217, 181, .8); }
  .x-mbar .x-btn { padding: 10px 18px; white-space: nowrap; }
}
.x-btn:focus-visible, .x-cta:focus-visible, .x-team:focus-visible, .x-sp:focus-visible, .x-stepbtn:focus-visible, .x-filters button:focus-visible, .x-faq summary:focus-visible, .x-locked summary:focus-visible { outline: 2px solid var(--x-amber); outline-offset: 2px; }

/* File d'attente et manches (6 nov.) */
.x-pill-live { color: #ef8b74; border-color: rgba(217, 82, 58, .5); background: rgba(217, 82, 58, .14); }
.x-pill-live .x-live { background: var(--x-r); }
.x-sb { color: var(--x-b); } .x-sr { color: var(--x-r); }
.x-title .x-sb, .x-title .x-sr { font-size: 1.5em; }
.x-title .x-sb { color: var(--x-b); } .x-title .x-sr { color: var(--x-r); }
.x-under { margin: -4px 0 0; font: 13px var(--x-ui); color: rgba(232, 217, 181, .6); }
.x-next-round { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; font: 13px var(--x-ui); color: rgba(232, 217, 181, .65); padding: 8px 14px; border-radius: 10px; background: rgba(36, 23, 16, .7); border: 1px solid var(--x-bark); }
.x-next-round > b { font: 700 20px var(--font-display, Georgia, serif); color: var(--x-amber); }
.x-next-round span b { color: var(--x-bone); }

.x-rounds { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .x-rounds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .x-rounds { grid-template-columns: 1fr; } }
.x-round { position: relative; border-radius: 12px; border: 1px solid var(--x-bark); background: rgba(36, 23, 16, .6); padding: 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.x-round.live { border-color: rgba(217, 82, 58, .55); background: linear-gradient(180deg, rgba(217, 82, 58, .12), rgba(36, 23, 16, .6)); }
.x-round.done { opacity: .7; }
.x-round.mine { border-color: var(--x-amber); box-shadow: 0 0 0 1px var(--x-amber), 0 14px 30px -20px rgba(232, 176, 74, .8); }
.x-round-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.x-round-n { font: 700 18px var(--font-display, Georgia, serif); color: var(--x-bone); letter-spacing: .03em; }
.x-round-t { font: 600 14px var(--x-ui); color: rgba(232, 217, 181, .7); font-variant-numeric: tabular-nums; }
.x-chip { justify-self: start; font: 700 10.5px var(--x-ui); letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; border: 1px solid var(--x-bark); color: rgba(232, 217, 181, .6); }
.x-chip.live { color: #ef8b74; border-color: rgba(217, 82, 58, .5); }
.x-chip.next { color: var(--x-amber); border-color: rgba(232, 176, 74, .5); }
.x-chip.full { color: var(--x-fern); border-color: rgba(107, 191, 82, .45); }
.x-chip.wait { color: rgba(232, 217, 181, .55); border-style: dashed; }
.x-round-main { font: 600 15px var(--x-ui); color: var(--x-bone); }
.x-round-main .x-sb, .x-round-main .x-sr { font-weight: 700; }
.x-round-sub { font: 12.5px/1.4 var(--x-ui); color: rgba(232, 217, 181, .55); }
.x-bars { display: grid; gap: 4px; }
.x-bars span { display: block; height: 6px; border-radius: 3px; background: rgba(232, 217, 181, .08); overflow: hidden; }
.x-bars i { display: block; height: 100%; border-radius: 3px; }
.x-bars .b i { background: var(--x-b); } .x-bars .r i { background: var(--x-r); }
.x-mine-tag { position: absolute; top: -9px; right: 12px; font: 700 10.5px var(--x-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--x-cacao); background: var(--x-amber); border-radius: 999px; padding: 2px 8px; }

.x-teams3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .x-teams3 { grid-template-columns: 1fr; } }
.x-team.any .x-tn { color: var(--x-amber); font-size: 24px; }
.x-team[aria-pressed="true"].any { border-color: var(--x-amber); background: linear-gradient(180deg, rgba(232, 176, 74, .14), rgba(36, 23, 16, .6)); }
.x-team.any:hover:not([disabled]) { border-color: rgba(232, 176, 74, .55); }
.x-q { font: 13.5px var(--x-ui); color: rgba(232, 217, 181, .7); }
.x-q b { font-size: 18px; color: var(--x-bone); }
.x-eta { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(26, 17, 10, .6); border: 1px solid var(--x-bark); font: 12.5px/1.4 var(--x-ui); color: rgba(232, 217, 181, .6); }
.x-eta b { font: 700 17px var(--font-display, Georgia, serif); color: var(--x-bone); letter-spacing: .02em; }
.x-eta.soon b { color: var(--x-fern); }
.x-eta.late b { color: var(--x-amber); }
.x-eta.none b { color: rgba(232, 217, 181, .55); }
.x-teamhelp { margin: 2px 0 0; font-size: 16px; }
.x-ticket { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 12px 14px; border-radius: 10px; border: 1px dashed rgba(232, 176, 74, .55); background: rgba(232, 176, 74, .06); }
.x-ticket .k { font: 11.5px var(--x-ui); letter-spacing: .1em; text-transform: uppercase; color: rgba(232, 217, 181, .5); }
.x-ticket .v { font: 600 15px var(--x-ui); color: var(--x-bone); }
.x-ticket .v.big { font: 700 22px var(--font-display, Georgia, serif); color: var(--x-amber); }

/* Gagnants dans la carte d'une partie terminée (6 nov.) */
.x-round.done { opacity: 1; }
.x-round.done .x-round-n, .x-round.done .x-round-t, .x-round.done .x-round-main { opacity: .75; }
.x-win { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--x-bark); }
.x-win-h { font: 700 11px var(--x-ui); letter-spacing: .1em; text-transform: uppercase; }
.x-win.b .x-win-h { color: var(--x-b); } .x-win.r .x-win-h { color: var(--x-r); }
.x-win-list { list-style: none; margin: 0 -14px; padding: 2px 14px 8px; display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(212, 162, 76, .45) transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent); }
.x-win-list li { flex: none; scroll-snap-align: start; }
.x-win-list::-webkit-scrollbar { height: 4px; } .x-win-list::-webkit-scrollbar-thumb { background: rgba(212, 162, 76, .45); border-radius: 2px; }
.x-win-list li { font: 500 11.5px/1 var(--x-ui); color: var(--x-bone); padding: 4px 7px; border-radius: 999px; background: rgba(26, 17, 10, .7); border: 1px solid var(--x-bark); white-space: nowrap; }
.x-win.b .x-win-list li { border-color: rgba(91, 151, 220, .4); } .x-win.r .x-win-list li { border-color: rgba(217, 82, 58, .4); }
.x-win-list li.mvp { color: var(--x-cacao); background: var(--x-amber); border-color: var(--x-amber); font-weight: 700; }
.x-win-list li.mvp::before { content: "★ "; }
.x-win-mvp { font: 12px var(--x-ui); color: rgba(232, 217, 181, .55); }

/* Formulaire dynamique : une étape à la fois (6 nov.) */
.x-wizard { display: grid; gap: 18px; padding: 18px; border-radius: 16px; border: 1px solid rgba(212, 162, 76, .3); background: radial-gradient(ellipse at top, rgba(232, 176, 74, .06), transparent 60%), rgba(26, 17, 10, .55); scroll-margin-top: 16px; }
.x-wizard .x-stepper { position: static; backdrop-filter: none; }
.x-wizard .x-panel { min-height: 420px; align-content: start; }
@media (prefers-reduced-motion: no-preference) {
  .x-panel.enter-fwd { animation: x-in-fwd .32s cubic-bezier(.22, 1, .36, 1); }
  .x-panel.enter-back { animation: x-in-back .32s cubic-bezier(.22, 1, .36, 1); }
  @keyframes x-in-fwd { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  @keyframes x-in-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
}
.x-wnav { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--x-bark); flex-wrap: wrap; }
.x-wnav .x-hint { flex: 1 1 160px; }
.x-wnav .x-btn.go { margin-left: auto; }
.x-stepper li.is-done .x-stepbtn:not(:disabled):hover, .x-stepper li.is-now .x-stepbtn { cursor: pointer; }
.x-stepper .x-stepbtn:disabled { opacity: .55; }
.x-stepbar { height: 3px; border-radius: 2px; background: rgba(232, 217, 181, .08); overflow: hidden; margin-top: -10px; }
.x-stepbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--x-gold), var(--x-amber)); transition: width .35s; }

/* Espèce déjà prise dans le camp (6 nov.) */
.x-sprule { margin: 4px 0 0; font: 13px var(--x-ui); color: rgba(232, 217, 181, .6); }
.x-sprule b { color: var(--x-amber); font-weight: 600; }
.x-sp.is-taken { cursor: not-allowed; border-style: dashed; transform: none; }
.x-sp.is-taken .x-sp-img img { filter: grayscale(1) brightness(.42); }
.x-sp.is-taken .x-sp-nm { color: rgba(232, 217, 181, .5); }
.x-sp.is-taken .x-diet { opacity: .5; }
.x-taken { position: absolute; inset: auto 8px 30px 8px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 999px; background: rgba(26, 17, 10, .88); border: 1px solid var(--x-bark); backdrop-filter: blur(3px); }
.x-taken i { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-content: center; font: 700 11px var(--x-ui); font-style: normal; color: var(--x-cacao); }
.x-taken.b i { background: var(--x-b); } .x-taken.r i { background: var(--x-r); } .x-taken.you i { background: var(--x-amber); }
.x-taken.b { border-color: rgba(91, 151, 220, .45); } .x-taken.r { border-color: rgba(217, 82, 58, .45); } .x-taken.you { border-color: var(--x-amber); }
.x-taken > span { display: grid; min-width: 0; font: 10px/1.2 var(--x-ui); letter-spacing: .08em; text-transform: uppercase; color: rgba(232, 217, 181, .55); }
.x-taken b { font: 600 12.5px/1.25 var(--x-ui); letter-spacing: 0; text-transform: none; color: var(--x-bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-sp:not(.is-taken)[disabled] { cursor: default; }

/* Téléphone : le récapitulatif laisse la place à la barre d’action du bas (règle posée après .x-sum, qui la surchargeait). */
@media (max-width: 1080px) { .x-sum { display: none; } }