:root{--ink:#17324d;--muted:#617387;--line:#dfe7ea;--paper:#f4f3ed;--white:#fff;--teal:#118b7e;--teal-dark:#0c665e}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 85% 0%,#e5f4f0 0,transparent 30%),var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}.topbar{height:76px;padding:0 clamp(24px,4vw,64px);background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:13px}.brand span{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--teal);font-weight:800;font-size:14px}.brand strong{font-size:18px}.topbar nav{display:flex;gap:18px}.topbar a{color:var(--teal-dark);font-size:13px;font-weight:700}.round-pill,.sync-pill,.status{border:1px solid #bde1d8;background:#edf9f5;color:#176a5e;padding:9px 13px;border-radius:999px;font-size:13px;font-weight:700}.dashboard,.team-page{max-width:1440px;padding:42px clamp(24px,4vw,64px) 28px;margin:auto}.team-page{max-width:1180px}.intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:26px}.eyebrow,.section-title span,.common-head span,.balance-card>span{color:var(--teal-dark);font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin:0 0 8px}h1{margin:0;font-size:clamp(30px,3vw,48px);line-height:1.08;letter-spacing:-1.8px}.intro p:last-child{margin:10px 0 0;color:var(--muted);font-size:17px}.common-card,.setup-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px 34px 24px;box-shadow:0 16px 50px rgba(21,50,74,.07)}.common-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:25px}.common-head strong{display:block;font-size:clamp(42px,5vw,68px);letter-spacing:-3px;line-height:.95}.common-head small{font-size:18px;letter-spacing:0;color:var(--muted)}.level-copy{text-align:right;display:flex;flex-direction:column;align-items:end}.level-copy b{font-size:22px;color:var(--teal-dark)}.level-copy small{margin-top:5px;color:var(--muted)}.track{height:20px;background:#e8ecea;border-radius:999px;position:relative}.track>div{height:100%;border-radius:inherit;background:linear-gradient(90deg,#59b8a6,var(--teal));transition:width .7s}.track i{position:absolute;top:50%;width:4px;height:28px;background:#fff;border:1px solid #aebcb9;transform:translate(-2px,-50%)}.scale{display:grid;grid-template-columns:repeat(5,1fr);margin-top:13px}.scale div{display:flex;flex-direction:column;color:#93a0aa;font-size:11px}.scale div:not(:first-child){align-items:center;text-align:center}.scale div:last-child{align-items:end;text-align:right}.scale b{font-size:13px}.scale .reached{color:var(--teal-dark)}.next{margin:22px -34px -24px;padding:15px 34px;background:#f7faf9;border-radius:0 0 24px 24px;text-align:center;color:var(--muted)}.next strong{color:var(--ink)}.teams-section{margin-top:30px}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:15px}.section-title h2{margin:0;font-size:25px}.section-title p{margin:0;color:var(--muted);font-size:13px}.team-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.team-card{background:#fff;border:1px solid var(--line);border-top:5px solid var(--team);border-radius:18px;padding:20px}.team-name{display:flex;gap:10px;align-items:center}.team-name i{width:12px;height:12px;background:var(--team);border-radius:50%;box-shadow:0 0 0 5px var(--team-soft)}.team-name h3{margin:0}.team-numbers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 18px}.team-numbers p{margin:0}.team-numbers span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.team-numbers strong{font-size:26px}.bet-state{display:block;text-align:center;background:#f3f5f5;color:#7b8891;border-radius:10px;padding:10px;font-size:12px;font-weight:800}.bet-state.ready{background:var(--team-soft);color:var(--team)}footer{display:flex;justify-content:space-between;border-top:1px solid #d9e1e3;margin-top:28px;padding-top:18px;color:var(--muted);font-size:11px;text-transform:uppercase}footer p{font-weight:800;color:var(--ink)}.team-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.private-label{color:var(--muted);font-size:12px;border:1px solid var(--line);background:#fff;padding:10px 13px;border-radius:10px}.team-grid{display:grid;grid-template-columns:330px 1fr;gap:22px}.balance-card,.bet-card,.team-help{background:#fff;border:1px solid var(--line);border-radius:22px}.balance-card{padding:27px;border-top:6px solid var(--team)}.balance-card strong{display:block;font-size:58px;letter-spacing:-3px;margin:14px 0}.balance-card p,.team-help p{color:var(--muted);font-size:13px;line-height:1.5}.current-bet{border-top:1px solid var(--line);margin-top:22px;padding-top:18px;display:flex;flex-direction:column}.current-bet b{color:var(--team)}.bet-card{padding:28px}.quick-bets{display:flex;gap:9px;margin:22px 0}.quick-bets button,.host-team-actions button{border:1px solid #cfdadc;background:#fff;border-radius:10px;padding:10px 15px;color:var(--ink);font-weight:700;cursor:pointer}.bet-input>span{display:block;color:var(--muted);font-size:12px;font-weight:700;margin-bottom:8px}.bet-input>div{display:flex;border:2px solid var(--team);border-radius:13px;overflow:hidden}.bet-input input{min-width:0;flex:1;border:0;padding:13px 15px;font-size:24px;font-weight:800}.bet-input b{background:var(--team-soft);color:var(--team);padding:17px;font-size:12px}.range{width:100%;accent-color:var(--team);margin:18px 0}.outcomes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}.outcomes p{margin:0;border:1px solid var(--line);border-radius:12px;padding:14px}.outcomes span{display:block;color:var(--muted);font-size:11px}.primary{border:0;background:var(--teal);color:#fff;padding:13px 17px;border-radius:11px;font-weight:800;cursor:pointer}.bet-card>.primary{width:100%;background:var(--team)}button:disabled{opacity:.4;cursor:not-allowed}.notice{background:#eef8f5;color:#176a5e;padding:12px;border-radius:10px}.hidden{display:none}.team-help{margin-top:20px;padding:18px 22px}.host-team-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.host-team-actions>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}.host-team-actions strong,.host-team-actions span{display:block}.host-team-actions span{color:var(--muted);font-size:12px;margin:6px 0 14px}.host-team-actions>div>div{display:grid;grid-template-columns:1fr 1fr;gap:7px}.host-team-actions .wide{grid-column:1/3}.host-toolbar{background:#17324d;color:#fff;border-radius:17px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center}.host-toolbar>div{display:flex;gap:8px}.quiet{border:1px solid #60768a;background:transparent;color:#fff;padding:11px;border-radius:9px}.danger{color:#ffd0d0}.setup-card{margin-top:24px}.setup-card h2{margin-top:0}.setup-card>p{color:var(--muted)}#capital-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700}input{border:1px solid #cbd7dc;border-radius:9px;padding:11px}.simple-page{min-height:100vh;display:grid;place-items:center;padding:20px}.install-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;max-width:650px;width:100%}.install-card form{display:grid;gap:16px}.success-box,.error-box{padding:16px;border-radius:12px}.success-box{background:#eaf8f3}.error-box{background:#fff0f0;color:#8b3030}.success-box label{margin:12px 0}.success-box input{font-family:monospace}.install-card a{color:var(--teal-dark)}
@media(max-width:800px){.topbar{height:64px;padding:0 16px}.dashboard,.team-page{padding:28px 16px}.common-head,.team-heading,.host-toolbar{align-items:start;flex-direction:column;gap:15px}.level-copy{text-align:left;align-items:start}.scale span{display:none}.team-cards,.team-grid,.host-team-actions,#capital-inputs{grid-template-columns:1fr}.section-title p{display:none}.balance-card strong{font-size:46px}.host-toolbar>div{display:grid;width:100%}.host-toolbar button{width:100%}.topbar nav a:first-child{display:none}}
@media(max-width:500px){.brand strong{font-size:14px}.common-card{padding:24px 20px}.next{margin:20px -20px -24px}.outcomes{grid-template-columns:1fr}.quick-bets{display:grid;grid-template-columns:1fr 1fr}}
.team-name{justify-content:center;height:96px}.team-name i,.team-name h3{display:none}.team-picto{display:block;width:74px;height:74px;object-fit:contain;margin:0 auto}.team-picto-large{width:110px;height:110px}.team-picto-small{width:48px;height:48px}.install-picto{width:72px;height:72px;object-fit:contain;margin:0 auto}
.workflow-help{display:flex;gap:28px;align-items:center;background:#eaf7f5;border:1px solid #b9ddd6;border-radius:16px;padding:16px 20px;margin-bottom:22px}.workflow-help strong{white-space:nowrap;color:var(--teal-dark)}.workflow-help ol{display:flex;gap:28px;margin:0;padding-left:22px;color:var(--muted);font-size:13px}.loading-message{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;color:var(--muted)}
@media(max-width:900px){.workflow-help,.workflow-help ol{align-items:flex-start;flex-direction:column;gap:9px}.workflow-help ol{padding-left:22px}}
.level-story{margin:28px -34px -24px;padding:28px 34px 24px;background:linear-gradient(135deg,#f2faf7,#f8fbfa);border-radius:0 0 24px 24px;text-align:center;border-top:1px solid #dfece8}.level-kicker{display:block;color:var(--teal-dark);font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.level-story h2{margin:7px 0 16px;font-size:clamp(30px,3.2vw,46px);line-height:1.08;letter-spacing:-1.2px;color:var(--teal-dark)}.level-text{max-width:980px;margin:0 auto;color:var(--ink);font-size:clamp(15px,1.4vw,18px);line-height:1.55}.level-text p{margin:0 0 10px}.remaining{display:inline-block;margin:12px 0 0;padding:11px 18px;border-radius:999px;background:#fff;border:1px solid #badbd3;color:var(--teal-dark);font-size:16px}.remaining strong{font-size:20px}.common-head{justify-content:flex-start}.brand strong{max-width:440px}
@media(max-width:800px){.level-story{margin:24px -20px -24px;padding:24px 20px}.level-story h2{font-size:30px}.remaining{border-radius:14px}.brand strong{max-width:245px;line-height:1.1}}

/* Projection grand écran : toutes les informations tiennent dans la hauteur disponible. */
@media (min-width: 901px) {
  #projection {
    height: 100vh;
    min-height: 680px;
    overflow: hidden;
  }

  #projection .topbar {
    height: 62px;
    padding: 0 clamp(28px, 3vw, 54px);
  }

  #projection .brand span {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  #projection .brand strong {
    font-size: 17px;
  }

  #projection .round-pill {
    border: 0;
    border-radius: 13px;
    padding: 11px 22px;
    color: #fff;
    background: linear-gradient(135deg, #0c665e, #118b7e);
    box-shadow: 0 7px 20px rgba(12, 102, 94, .24);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
  }

  #projection .dashboard {
    width: 100%;
    max-width: 1500px;
    height: calc(100vh - 62px);
    min-height: 618px;
    padding: 14px clamp(26px, 3vw, 52px) 10px;
    display: flex;
    flex-direction: column;
  }

  #projection .intro {
    margin-bottom: 11px;
  }

  #projection .intro .eyebrow {
    margin-bottom: 4px;
    font-size: 10px;
  }

  #projection .intro h1 {
    font-size: clamp(27px, 2.35vw, 38px);
    line-height: 1.03;
  }

  #projection .common-card {
    padding: 15px 28px 12px;
    border-radius: 20px;
  }

  #projection .common-head {
    margin-bottom: 11px;
  }

  #projection .common-head span {
    margin-bottom: 4px;
    font-size: 10px;
  }

  #projection .common-head strong {
    font-size: clamp(40px, 4vw, 55px);
  }

  #projection .common-head small {
    font-size: 15px;
  }

  #projection .track {
    height: 15px;
  }

  #projection .track i {
    height: 23px;
  }

  #projection .scale {
    margin-top: 8px;
  }

  #projection .scale b {
    font-size: 11px;
  }

  #projection .scale span {
    font-size: 9px;
  }

  #projection .level-story {
    margin: 12px -28px -12px;
    padding: 11px 28px 12px;
    border-radius: 0 0 20px 20px;
  }

  #projection .level-kicker {
    font-size: 10px;
  }

  #projection .level-story h2 {
    margin: 3px 0 7px;
    font-size: clamp(25px, 2.4vw, 35px);
  }

  #projection .level-text {
    max-width: 1180px;
    font-size: clamp(12px, 1.15vw, 15px);
    line-height: 1.32;
  }

  #projection .level-text p {
    margin: 0 0 4px;
  }

  #projection .remaining {
    margin-top: 6px;
    padding: 7px 14px;
    font-size: 13px;
  }

  #projection .remaining strong {
    font-size: 16px;
  }

  #projection .teams-section {
    margin-top: 12px;
  }

  #projection .section-title {
    margin-bottom: 8px;
  }

  #projection .section-title span {
    margin-bottom: 2px;
    font-size: 9px;
  }

  #projection .section-title h2 {
    font-size: 20px;
  }

  #projection .section-title p {
    font-size: 11px;
  }

  #projection .team-cards {
    gap: 14px;
  }

  #projection .team-card {
    padding: 10px 14px;
    border-top-width: 4px;
    border-radius: 15px;
  }

  #projection .team-name {
    height: 56px;
  }

  #projection .team-picto {
    width: 52px;
    height: 52px;
  }

  #projection .team-numbers {
    gap: 8px;
    margin: 7px 0 7px;
  }

  #projection .team-numbers span {
    margin-bottom: 2px;
    font-size: 9px;
  }

  #projection .team-numbers strong {
    font-size: 20px;
  }

  #projection .bet-state {
    padding: 6px;
    font-size: 10px;
  }

  #projection footer {
    margin-top: auto;
    padding-top: 7px;
    font-size: 9px;
  }
}

@media (min-width: 901px) and (max-height: 800px) {
  #projection .topbar {
    height: 54px;
  }

  #projection .round-pill {
    padding: 9px 18px;
    font-size: 15px;
  }

  #projection .dashboard {
    height: calc(100vh - 54px);
    min-height: 626px;
    padding-top: 9px;
  }

  #projection .intro {
    margin-bottom: 7px;
  }

  #projection .intro h1 {
    font-size: 28px;
  }

  #projection .common-card {
    padding-top: 11px;
  }

  #projection .level-story {
    padding-top: 8px;
    padding-bottom: 9px;
  }

  #projection .level-story h2 {
    font-size: 27px;
  }

  #projection .level-text {
    font-size: 12px;
    line-height: 1.24;
  }

  #projection .teams-section {
    margin-top: 8px;
  }

  #projection .team-name {
    height: 44px;
  }

  #projection .team-picto {
    width: 42px;
    height: 42px;
  }

  #projection footer {
    display: none;
  }
}

/* Projection sans bandeau supérieur ni pied de page. */
@media (min-width: 901px) {
  #projection {
    min-height: 0;
  }

  #projection .dashboard {
    height: 100vh;
    min-height: 0;
    padding-top: 18px;
    padding-bottom: 14px;
  }

  #projection .intro {
    align-items: center;
    gap: 28px;
  }

  #projection .round-pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (min-width: 901px) and (max-height: 800px) {
  #projection .dashboard {
    height: 100vh;
    min-height: 0;
    padding-top: 10px;
  }
}

/* Paliers de progression lisibles à distance sur l’écran de projection. */
@media (min-width: 901px) {
  #projection .scale {
    margin-top: 11px;
    min-height: 48px;
  }

  #projection .scale div {
    gap: 3px;
    padding: 0 8px;
    color: #40566b;
    line-height: 1.12;
  }

  #projection .scale div:first-child {
    padding-left: 0;
  }

  #projection .scale div:last-child {
    padding-right: 0;
  }

  #projection .scale b {
    color: var(--ink);
    font-size: clamp(17px, 1.35vw, 21px);
    font-weight: 900;
    letter-spacing: -.02em;
  }

  #projection .scale span {
    max-width: 250px;
    color: #40566b;
    font-size: clamp(12px, .95vw, 15px);
    font-weight: 700;
    line-height: 1.18;
    text-wrap: balance;
  }

  #projection .scale .reached b,
  #projection .scale .reached span {
    color: var(--teal-dark);
  }
}

/* Réorganisation générale de la projection et cartes d’équipes à forte lisibilité. */
@media (min-width: 901px) {
  #projection .dashboard {
    max-width: 1720px;
    padding-right: clamp(32px, 2.5vw, 48px);
    padding-left: clamp(32px, 2.5vw, 48px);
  }

  #projection .intro h1 {
    font-size: clamp(31px, 2.45vw, 42px);
  }

  #projection .round-pill {
    padding: 12px 24px;
    font-size: 18px;
  }

  #projection .common-head strong {
    font-size: clamp(48px, 4.2vw, 64px);
  }

  #projection .teams-section {
    margin-top: 18px;
  }

  #projection .section-title {
    margin-bottom: 11px;
  }

  #projection .section-title h2 {
    font-size: clamp(24px, 1.65vw, 29px);
    letter-spacing: -.02em;
  }

  #projection .section-title p {
    font-size: 13px;
  }

  #projection .team-cards {
    gap: 18px;
  }

  #projection .team-card {
    min-height: 230px;
    padding: 14px 18px 15px;
    display: flex;
    flex-direction: column;
    border-top-width: 5px;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(21, 50, 74, .06);
  }

  #projection .team-name {
    width: 100%;
    height: 74px;
    display: grid;
    place-items: center;
  }

  #projection .team-picto {
    width: 68px;
    height: 68px;
    margin: 0;
  }

  #projection .team-numbers {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 10px 0 12px;
  }

  #projection .team-stat {
    min-height: 84px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    text-align: center;
  }

  #projection .balance-stat {
    background: #f2f6f8;
    border: 1px solid #d6e1e6;
  }

  #projection .bet-stat {
    background: var(--team-soft);
    border: 2px solid var(--team);
  }

  #projection .team-numbers span {
    margin-bottom: 5px;
    color: #40566b;
    font-size: clamp(12px, .9vw, 15px);
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
  }

  #projection .team-numbers strong {
    color: var(--ink);
    font-size: clamp(28px, 2vw, 36px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.035em;
  }

  #projection .bet-stat span,
  #projection .bet-stat strong {
    color: var(--team);
  }

  #projection .bet-state {
    margin-top: auto;
    padding: 9px 10px;
    border-radius: 11px;
    font-size: 13px;
    letter-spacing: .015em;
  }
}

@media (min-width: 901px) and (max-height: 800px) {
  #projection .teams-section {
    margin-top: 10px;
  }

  #projection .section-title {
    margin-bottom: 7px;
  }

  #projection .team-card {
    min-height: 190px;
    padding: 9px 13px 10px;
  }

  #projection .team-name {
    height: 54px;
  }

  #projection .team-picto {
    width: 52px;
    height: 52px;
  }

  #projection .team-numbers {
    margin: 7px 0 8px;
  }

  #projection .team-stat {
    min-height: 66px;
    padding: 7px 10px;
  }

  #projection .team-numbers strong {
    font-size: 27px;
  }

  #projection .bet-state {
    padding: 7px;
    font-size: 11px;
  }
}

/* Palette commune des contributions et progression par paliers distincts. */
@media (min-width: 901px) {
  #projection .common-head {
    justify-content: center;
    text-align: center;
  }

  #projection .common-score {
    width: 100%;
  }

  #projection .track > .track-segment {
    position: absolute;
    top: 0;
    height: 100%;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    transition: none;
  }

  #projection .track-segment > span {
    display: block;
    height: 100%;
    background: var(--segment);
    border-radius: 0;
    transition: width .7s ease;
  }

  #projection .track-segment.first > span {
    border-radius: 999px 0 0 999px;
  }

  #projection .track-segment.edge > span {
    border-radius: 0 999px 999px 0;
  }

  #projection .track-segment.first.edge > span {
    border-radius: 999px;
  }

  #projection .track i {
    z-index: 2;
  }

  #projection .scale .reached b,
  #projection .scale .reached span {
    color: var(--stage);
  }

  #projection .team-card {
    border-top-color: #f2a400;
  }

  #projection .balance-stat {
    background: #e8f5f5;
    border: 2px solid var(--teal);
  }

  #projection .balance-stat span,
  #projection .balance-stat strong {
    color: var(--teal-dark);
  }

  #projection .bet-stat {
    background: #fff5df;
    border: 2px solid #f2a400;
  }

  #projection .bet-stat span,
  #projection .bet-stat strong {
    color: #d98d00;
  }

  #projection .bet-state.ready {
    background: #fff1cf;
    color: #b77400;
  }
}

/* La progression segmentée est également utilisée dans le pupitre de l’animateur. */
.track > .track-segment {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  transition: none;
}

.track-segment > span {
  display: block;
  height: 100%;
  background: var(--segment);
  border-radius: 0;
  transition: width .7s ease;
}

.track-segment.first > span {
  border-radius: 999px 0 0 999px;
}

.track-segment.edge > span {
  border-radius: 0 999px 999px 0;
}

.track-segment.first.edge > span {
  border-radius: 999px;
}

.track i {
  z-index: 2;
}

/* Textes de niveau et décompte optimisés pour une lecture à distance. */
@media (min-width: 901px) {
  #projection .level-story {
    height: clamp(220px, 30.5vh, 330px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #projection .level-story > * {
    flex-shrink: 0;
  }

  #projection .level-text {
    width: 100%;
    max-width: 1280px;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.42;
  }

  #projection .level-text p {
    margin-bottom: 7px;
  }

  #projection .level-text p:first-child {
    font-size: 1.08em;
    font-weight: 800;
  }

  #projection .remaining {
    margin-top: 9px;
    padding: 10px 20px;
    border: 0;
    background: var(--teal-dark);
    color: #fff;
    box-shadow: 0 7px 18px rgba(12, 102, 94, .18);
    font-size: clamp(15px, 1vw, 18px);
    font-weight: 700;
  }

  #projection .remaining strong {
    color: #fff;
    font-size: clamp(20px, 1.35vw, 24px);
    font-weight: 900;
  }
}

@media (min-width: 901px) and (max-height: 800px) {
  #projection .level-text {
    font-size: 14px;
    line-height: 1.3;
  }

  #projection .remaining {
    margin-top: 6px;
    padding: 7px 15px;
    font-size: 14px;
  }

  #projection .remaining strong {
    font-size: 18px;
  }
}

/* Signaux visuels brefs lors des mises, gains et changements de palier. */
#projection .common-card,
#projection .team-card,
#projection .level-story {
  position: relative;
}

#projection .event-sparkles {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

#projection .event-sparkles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  aspect-ratio: 1;
  opacity: 0;
  background: #f2a400;
  clip-path: polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%);
  animation: sparkle-pop 4.2s var(--delay) ease-out forwards;
}

#projection .event-sparkles.score i {
  background: var(--teal);
}

#projection .event-sparkles.level i:nth-child(3n+1) {
  background: #f2a400;
}

#projection .event-sparkles.level i:nth-child(3n+2) {
  background: var(--teal);
}

#projection .event-sparkles.level i:nth-child(3n) {
  background: #d9a20b;
}

#projection .team-card.just-updated {
  animation: team-event 4.4s ease-out;
}

#projection .common-card.score-updated .common-score strong {
  animation: score-event 4.4s ease-out;
}

#projection .common-card.score-updated .track {
  animation: track-event 4.4s ease-out;
}

#projection .level-story.level-up {
  animation: level-event 5.6s ease-out;
}

@keyframes sparkle-pop {
  0% {
    opacity: 0;
    transform: translate(0, 18px) rotate(0) scale(0);
  }
  22% {
    opacity: 1;
    transform: translate(var(--drift), 0) rotate(45deg) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(var(--drift), -42px) rotate(135deg) scale(.25);
  }
}

@keyframes team-event {
  0%, 100% {
    box-shadow: 0 12px 30px rgba(21, 50, 74, .06);
  }
  18%, 50% {
    box-shadow: 0 0 0 5px rgba(242, 164, 0, .24), 0 16px 38px rgba(242, 164, 0, .24);
    transform: translateY(-3px);
  }
}

@keyframes score-event {
  0%, 100% {
    color: var(--ink);
    transform: scale(1);
  }
  22%, 55% {
    color: var(--teal);
    transform: scale(1.13);
  }
}

@keyframes track-event {
  0%, 100% {
    box-shadow: none;
  }
  25%, 55% {
    box-shadow: 0 0 0 6px rgba(17, 139, 126, .16);
  }
}

@keyframes level-event {
  0%, 100% {
    background: linear-gradient(135deg, #f2faf7, #f8fbfa);
  }
  18%, 58% {
    background: linear-gradient(135deg, #fff1c9, #e9faf5);
    box-shadow: inset 0 0 0 4px rgba(242, 164, 0, .24);
  }
}

@media (prefers-reduced-motion: reduce) {
  #projection .event-sparkles {
    display: none;
  }

  #projection .team-card.just-updated,
  #projection .common-card.score-updated .common-score strong,
  #projection .common-card.score-updated .track,
  #projection .level-story.level-up {
    animation: none;
  }
}

/* Positionnement fidèle des niveaux sur une échelle prolongée jusqu’à 25 000 points. */
.scale.scale-positioned {
  position: relative;
  display: block;
  height: 55px;
}

.scale.scale-positioned > div {
  position: absolute;
  top: 0;
  width: max-content;
  max-width: 230px;
  padding: 0 6px;
  align-items: center;
  text-align: center;
  transform: translateX(-50%);
}

.scale.scale-positioned > div:first-child {
  padding-left: 0;
  align-items: flex-start;
  text-align: left;
  transform: none;
}

.scale.scale-positioned > .scale-cap {
  padding-right: 0;
  align-items: flex-end;
  text-align: right;
  transform: translateX(-100%);
}

.scale.scale-positioned > .scale-cap b {
  color: var(--muted);
}

#projection .scale.scale-positioned {
  position: relative;
  display: block;
  height: 58px;
}

#projection .scale.scale-positioned > div {
  position: absolute;
  top: 0;
  width: max-content;
  max-width: 250px;
  padding: 0 8px;
  align-items: center;
  text-align: center;
  transform: translateX(-50%);
}

#projection .scale.scale-positioned > div:first-child {
  padding-left: 0;
  align-items: flex-start;
  text-align: left;
  transform: none;
}

#projection .scale.scale-positioned > .scale-cap {
  padding-right: 0;
  align-items: flex-end;
  text-align: right;
  transform: translateX(-100%);
}

#projection .scale.scale-positioned > .scale-cap b {
  color: #617387;
}

#projection .scale.scale-positioned > .scale-cap.reached b {
  color: var(--stage);
}

/* Signal bref lors du passage à l’épreuve suivante. */
#projection .round-pill.round-updated {
  transform-origin: center;
  animation: round-event 4.4s ease-out;
}

@keyframes round-event {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 7px 20px rgba(12, 102, 94, .24);
  }
  15%, 45% {
    transform: scale(1.09);
    box-shadow: 0 0 0 11px rgba(17, 139, 126, .16), 0 12px 30px rgba(12, 102, 94, .34);
  }
  30%, 60% {
    transform: scale(1.02);
    box-shadow: 0 0 0 4px rgba(17, 139, 126, .08), 0 8px 22px rgba(12, 102, 94, .26);
  }
}

@media (prefers-reduced-motion: reduce) {
  #projection .round-pill.round-updated {
    animation: none;
  }
}

/* Le pupitre conserve le texte complet ; la projection utilise une version synthétique. */
.level-summary {
  display: none;
}

.level-full {
  display: block;
}

/* Hiérarchie de projection : équipes compactes, progression centrale, récit en bas. */
@media (min-width: 901px) {
  #projection .teams-section {
    margin-top: 0;
    margin-bottom: 13px;
  }

  #projection .section-title {
    margin-bottom: 7px;
  }

  #projection .section-title h2 {
    font-size: clamp(21px, 1.35vw, 25px);
  }

  #projection .team-cards {
    gap: 15px;
  }

  #projection .team-card {
    min-height: 0;
    padding: 9px 13px 10px;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    border-radius: 16px;
  }

  #projection .team-name {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 68px;
    height: 100%;
    min-height: 91px;
    display: grid;
    place-items: center;
  }

  #projection .team-picto {
    width: 58px;
    height: 58px;
  }

  #projection .team-numbers {
    grid-column: 2;
    grid-row: 1;
    gap: 10px;
    margin: 0;
  }

  #projection .team-stat {
    min-height: 58px;
    padding: 6px 9px;
    border-radius: 11px;
  }

  #projection .team-numbers span {
    margin-bottom: 3px;
    font-size: clamp(10px, .7vw, 12px);
  }

  #projection .team-numbers strong {
    font-size: clamp(23px, 1.55vw, 28px);
  }

  #projection .bet-state {
    grid-column: 2;
    grid-row: 2;
    margin-top: 6px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 11px;
  }

  #projection #common {
    margin-top: 0;
  }

  #projection .level-story {
    height: clamp(190px, 22vh, 240px);
  }

  #projection .level-summary {
    display: block;
    font-size: clamp(19px, 1.35vw, 24px);
    line-height: 1.3;
  }

  #projection .level-full {
    display: none;
  }

  #projection .level-story.show-full-story .level-summary {
    display: none;
  }

  #projection .level-story.show-full-story .level-full {
    display: block;
  }
}

@media (min-width: 901px) and (max-height: 800px) {
  #projection .teams-section {
    margin-bottom: 8px;
  }

  #projection .section-title {
    margin-bottom: 5px;
  }

  #projection .team-card {
    padding: 6px 10px 7px;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 9px;
  }

  #projection .team-name {
    width: 58px;
    min-height: 78px;
  }

  #projection .team-picto {
    width: 48px;
    height: 48px;
  }

  #projection .team-stat {
    min-height: 49px;
    padding: 4px 7px;
  }

  #projection .team-numbers strong {
    font-size: 23px;
  }

  #projection .bet-state {
    margin-top: 4px;
    padding: 4px 6px;
    font-size: 10px;
  }

  #projection .level-story {
    height: 180px;
  }

  #projection .level-summary {
    font-size: 18px;
  }
}

/* Zone narrative agrandie, à hauteur stable, avec texte ajusté au contenu. */
@media (min-width: 901px) {
  #projection .level-story {
    height: clamp(250px, 30vh, 320px);
  }

  #projection .level-summary {
    font-size: clamp(22px, 1.55vw, 28px);
    line-height: 1.3;
  }

  #projection .level-full {
    font-size: clamp(18px, 1.35vw, 22px);
    line-height: 1.38;
  }
}

@media (min-width: 901px) and (max-height: 800px) {
  #projection .level-story {
    height: 230px;
  }

  #projection .level-summary {
    font-size: 21px;
  }

  #projection .level-full {
    font-size: 18px;
  }
}

/* Utilisation complète de la hauteur disponible et séparation des zones. */
@media (min-width: 901px) {
  #projection .intro,
  #projection .teams-section {
    flex-shrink: 0;
  }

  #projection .team-cards {
    gap: 28px;
  }

  #projection .teams-section {
    margin-bottom: 28px;
  }

  #projection #common {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
  }

  #projection .common-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  #projection .level-story {
    height: auto;
    min-height: 250px;
    flex: 1 1 auto;
  }

  #projection .level-full {
    font-size: clamp(20px, 1.55vw, 26px);
  }
}

@media (min-width: 901px) and (max-height: 800px) {
  #projection .team-cards {
    gap: 22px;
  }

  #projection .teams-section {
    margin-bottom: 18px;
  }

  #projection .level-story {
    height: auto;
    min-height: 200px;
  }

  #projection .level-full {
    font-size: 20px;
  }
}

/* Commande globale d’ouverture et de clôture des mises. */
.host-toolbar > div {
  flex-wrap: wrap;
  justify-content: flex-end;
}

#bets-lock-toggle {
  min-width: 168px;
}

/* Pupitre animateur compact : toutes les informations utiles restent dans le viewport. */
@media (min-width: 901px) {
  .host-page .topbar {
    height: 60px;
  }

  .host-page .dashboard {
    max-width: 1600px;
    padding: 14px clamp(20px, 3vw, 48px) 16px;
  }

  .host-page .intro {
    margin: 0;
  }

  .host-page .intro .eyebrow {
    margin-bottom: 2px;
    font-size: 10px;
  }

  .host-page .intro h1 {
    font-size: clamp(27px, 2.2vw, 34px);
    letter-spacing: -1px;
  }

  #host-summary {
    min-height: 0;
  }

  #host-summary .common-card {
    height: auto;
    min-height: 0;
    padding: 14px 22px 12px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
  }

  #host-summary .common-head {
    justify-content: center;
    text-align: center;
    margin-bottom: 10px;
  }

  #host-summary .common-score {
    width: 100%;
  }

  #host-summary .common-head strong {
    font-size: clamp(38px, 3.4vw, 52px);
    letter-spacing: -2px;
  }

  #host-summary .common-head small {
    font-size: 14px;
  }

  #host-summary .track {
    height: 14px;
  }

  #host-summary .track i {
    height: 20px;
  }

  #host-summary .scale.scale-positioned {
    height: 42px;
    margin-top: 7px;
  }

  #host-summary .scale b {
    font-size: 12px;
  }

  #host-summary .scale span {
    font-size: 9px;
    line-height: 1.1;
  }

  #host-summary .level-story {
    min-height: 48px;
    margin: 7px -22px -12px;
    padding: 8px 22px 9px;
    border-radius: 0 0 18px 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    text-align: left;
  }

  #host-summary .level-kicker,
  #host-summary .level-summary,
  #host-summary .level-full {
    display: none;
  }

  #host-summary .level-story h2 {
    margin: 0;
    font-size: clamp(18px, 1.55vw, 24px);
    letter-spacing: -.4px;
  }

  #host-summary .remaining {
    margin: 0;
    padding: 7px 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  #host-summary .remaining strong {
    font-size: 15px;
  }

  .host-page .host-team-actions {
    gap: 18px;
    margin: 0;
  }

  .host-page .host-team-actions > div {
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
  }

  .host-page .host-team-actions > div > .team-picto {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 52px;
    height: 52px;
    margin: 0;
  }

  .host-page .host-team-actions > div > span {
    grid-column: 2;
    margin: 0 0 7px;
    font-size: 12px;
    font-weight: 700;
  }

  .host-page .host-team-actions > div > div {
    grid-column: 2;
  }

  .host-page .host-team-actions button {
    padding: 8px 11px;
  }

  .host-page .host-toolbar {
    margin: 0;
    min-height: 58px;
    padding: 10px 14px;
  }

  .host-page .host-toolbar > p {
    flex: 1 1 180px;
    margin: 0;
    font-size: 13px;
  }

  .host-page .host-toolbar button {
    padding: 9px 11px;
    font-size: 13px;
  }

  .host-page .setup-card {
    margin: 0;
    padding: 11px 16px;
    border-radius: 16px;
    display: grid;
    grid-template-columns: minmax(210px, .55fr) minmax(0, 1fr) max-content;
    align-items: center;
    gap: 16px;
  }

  .host-page .capital-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .host-page .capital-heading > div {
    min-width: 0;
  }

  .host-page .capital-heading h2 {
    margin: 0;
    font-size: 18px;
  }

  .host-page .capital-heading p {
    display: none;
  }

  .host-page .capital-status {
    flex: 0 0 auto;
  }

  .host-page #capital-inputs {
    min-width: 0;
    margin: 0;
    gap: 10px;
  }

  .host-page #capital-inputs label {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
  }

  .host-page #capital-inputs .team-picto-small {
    width: 32px;
    height: 32px;
    margin: 0;
  }

  .host-page #capital-inputs input {
    min-width: 0;
    width: 100%;
    padding: 8px 9px;
  }

  .host-page .capital-actions {
    max-width: 255px;
  }

  .host-page .capital-actions button {
    width: 100%;
    padding: 9px 12px;
    font-size: 12px;
  }
}

@media (min-width: 901px) and (min-height: 650px) {
  .host-page {
    height: 100vh;
    overflow: hidden;
  }

  .host-page .dashboard {
    height: calc(100vh - 60px);
    display: grid;
    grid-template-rows: auto auto auto auto auto auto;
    align-content: start;
    gap: clamp(8px, 1.15vh, 13px);
    overflow: hidden;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  #host-summary .level-story {
    gap: 10px;
  }

  #host-summary .remaining {
    white-space: normal;
    text-align: center;
  }

  .host-page .host-toolbar > p {
    display: none;
  }

  .host-page .setup-card {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .host-page .capital-heading {
    display: none;
  }
}

/* Confirmation explicite d’une mise sur les pages d’équipe. */
.bet-sent {
  margin: 16px 0 4px;
  padding: 13px 15px;
  border: 1px solid #9fd6cc;
  border-left: 5px solid var(--teal);
  border-radius: 12px;
  background: #eaf8f5;
  color: var(--teal-dark);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bet-sent strong {
  font-size: 17px;
}

.bet-sent span {
  font-size: 13px;
  line-height: 1.4;
}

.bet-sent.just-sent {
  animation: bet-sent-confirmation 1.4s ease-out;
}

@keyframes bet-sent-confirmation {
  0% {
    transform: scale(.97);
    box-shadow: 0 0 0 0 rgba(17, 139, 126, .3);
  }
  45% {
    transform: scale(1.015);
    box-shadow: 0 0 0 9px rgba(17, 139, 126, .12);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(17, 139, 126, 0);
  }
}

/* Hiérarchie et sécurisation des commandes du pupitre. */
.host-toolbar-main .host-phase {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
}

.host-toolbar-main .host-phase strong {
  color: #fff;
  font-size: 14px;
}

.host-toolbar-main .host-phase p {
  margin: 0;
  color: #cddbe6;
  font-size: 12px;
}

.host-toolbar-main .host-primary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* Capitaux protégés : état visible et modification volontaire en deux étapes. */
.capital-heading h2 {
  margin: 0;
}

.capital-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.capital-status {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 6px 9px;
  border: 1px solid #9fd6cc;
  border-radius: 999px;
  background: #eaf8f5;
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.setup-card:not(.is-locked) .capital-status {
  border-color: #e5bd5b;
  background: #fff7df;
  color: #825f00;
}

#capital-inputs input:disabled {
  border-color: #dbe2e4;
  background: #f2f5f5;
  color: #51636f;
  opacity: 1;
}

.capital-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.capital-actions button {
  white-space: nowrap;
}

.capital-unlock,
.capital-cancel-button {
  border: 1px solid #aa8421;
  border-radius: 10px;
  padding: 10px 13px;
  background: #fff9e9;
  color: #765700;
  font-weight: 800;
  cursor: pointer;
}

.capital-cancel-button {
  border-color: #9dabad;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}

.host-team-actions .result-success:not(:disabled) {
  border-color: #2f927e;
  background: #e7f6f2;
  color: #0c665e;
}

.host-team-actions .result-failure:not(:disabled) {
  border-color: #c77748;
  background: #fff0e6;
  color: #93451e;
}

.host-end-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  margin: 0;
}

.finish-zone,
.reset-zone {
  min-width: 0;
  border-radius: 14px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.finish-zone {
  justify-content: space-between;
  border: 1px solid #d5b75e;
  background: #fff8dc;
}

.finish-zone > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.finish-zone strong {
  color: #6b5310;
  font-size: 14px;
}

.finish-zone span,
.reset-zone span {
  color: var(--muted);
  font-size: 11px;
}

.finalize-button {
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  background: #8a6500;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.reset-zone {
  border: 1px solid #e5c9c9;
  background: #fffafa;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.reset-button {
  border: 1px solid #a94343;
  border-radius: 9px;
  padding: 8px 11px;
  background: transparent;
  color: #8f3030;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* Fenêtre de confirmation renforcée des actions irréversibles. */
.confirm-dialog {
  width: min(540px, calc(100vw - 32px));
  border: 0;
  border-radius: 20px;
  padding: 0;
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(20, 43, 61, .3);
}

.confirm-dialog::backdrop {
  background: rgba(15, 35, 52, .58);
  backdrop-filter: blur(3px);
}

.confirm-dialog form {
  padding: 26px;
}

.confirm-dialog h2 {
  margin: 0 0 12px;
  font-size: 26px;
}

.confirm-dialog #confirm-dialog-message {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.confirm-dialog form > div {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.dialog-cancel {
  border: 1px solid #b8c5cb;
  border-radius: 10px;
  padding: 11px 15px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

#confirm-dialog-action.dialog-danger {
  background: #9d3232;
}

#confirm-dialog-action.dialog-final {
  background: #8a6500;
}

/* Signal projeté distinct pour une réussite et un échec. */
.outcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 5vw;
  pointer-events: none;
  animation: outcome-overlay-life 6s ease both;
}

.outcome-overlay.success {
  background: radial-gradient(circle at center, rgba(209, 249, 237, .88), rgba(17, 139, 126, .34));
}

.outcome-overlay.failure {
  background: radial-gradient(circle at center, rgba(255, 240, 226, .92), rgba(177, 82, 43, .3));
}

.outcome-panel {
  width: min(980px, 86vw);
  min-height: 230px;
  padding: clamp(28px, 4vw, 55px);
  border: 5px solid;
  border-radius: 32px;
  background: rgba(255, 255, 255, .95);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 60px);
  text-align: left;
  box-shadow: 0 28px 90px rgba(18, 46, 62, .25);
}

.success .outcome-panel {
  border-color: var(--teal);
}

.failure .outcome-panel {
  border-color: #b65c30;
}

.outcome-panel img {
  width: clamp(120px, 13vw, 190px);
  height: clamp(120px, 13vw, 190px);
  object-fit: contain;
}

.outcome-panel > div {
  display: flex;
  flex-direction: column;
}

.outcome-panel span {
  margin-bottom: 9px;
  color: var(--muted);
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.outcome-panel strong {
  color: var(--ink);
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1.05;
  letter-spacing: -1.5px;
}

.outcome-panel p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: clamp(18px, 1.6vw, 26px);
}

#projection .team-card.outcome-card-success {
  outline: 8px solid rgba(17, 139, 126, .45);
  transform: scale(1.025);
}

#projection .team-card.outcome-card-failure {
  outline: 8px solid rgba(182, 92, 48, .4);
  transform: scale(.985);
}

@keyframes outcome-overlay-life {
  0% {
    opacity: 0;
    transform: scale(.985);
  }
  8%, 88% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.01);
  }
}

@media (max-width: 900px) {
  .capital-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .capital-actions {
    margin-top: 14px;
  }

  .capital-actions button {
    width: 100%;
  }

  .host-end-actions {
    grid-template-columns: 1fr;
  }

  .finish-zone,
  .reset-zone {
    align-items: stretch;
    flex-direction: column;
  }

  .reset-zone {
    align-items: stretch;
  }

  .outcome-panel {
    min-height: 0;
    flex-direction: column;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bet-sent.just-sent,
  .outcome-overlay {
    animation: none;
  }
}

/* Clôture collective persistante sur la projection et les smartphones. */
.final-kicker {
  margin: 0;
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#projection .final-message {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  margin: 0 0 20px;
  padding: clamp(18px, 2vw, 28px) clamp(24px, 3vw, 46px);
  border: 2px solid #d9b44b;
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 20%, rgba(255, 218, 107, .28), transparent 22%),
    linear-gradient(135deg, #fff8dc, #edf9f5 58%, #fff);
  text-align: center;
  box-shadow: 0 16px 42px rgba(32, 65, 76, .1);
}

#projection .final-message h2 {
  margin: 5px 0 8px;
  color: var(--teal-dark);
  font-size: clamp(30px, 3.1vw, 48px);
  line-height: 1.05;
  letter-spacing: -1.2px;
}

#projection .final-message > p:not(.final-kicker) {
  max-width: 1180px;
  margin: 0 auto;
  color: var(--ink);
  font-size: clamp(17px, 1.45vw, 23px);
  line-height: 1.35;
}

#projection .final-message > p strong {
  color: var(--teal-dark);
}

#projection .final-message .final-closing {
  margin-top: 7px;
  color: var(--muted);
  font-size: clamp(14px, 1.1vw, 18px);
}

#projection.is-finished .teams-section {
  display: none;
}

#projection.is-finished .round-pill {
  background: linear-gradient(135deg, #8a6500, #bd8b00);
  box-shadow: 0 7px 20px rgba(138, 101, 0, .24);
}

#projection .final-message.just-finished {
  animation: final-message-arrival 1.2s cubic-bezier(.2, .8, .2, 1);
}

@keyframes final-message-arrival {
  0% {
    opacity: 0;
    transform: translateY(-18px) scale(.98);
    box-shadow: 0 0 0 rgba(32, 65, 76, 0);
  }
  55% {
    opacity: 1;
    transform: translateY(0) scale(1.012);
    box-shadow: 0 20px 58px rgba(17, 139, 126, .2);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: 0 16px 42px rgba(32, 65, 76, .1);
  }
}

.team-final-card {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 5vw, 52px);
  border: 2px solid #d9b44b;
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 218, 107, .25), transparent 25%),
    linear-gradient(145deg, #fff9e5, #edf9f5 65%, #fff);
  text-align: center;
  box-shadow: 0 18px 55px rgba(21, 50, 74, .1);
  animation: team-final-arrival .9s ease-out both;
}

.team-final-card h1 {
  margin: 7px 0 13px;
  color: var(--teal-dark);
  font-size: clamp(30px, 5vw, 48px);
  letter-spacing: -1.2px;
}

.team-final-intro,
.team-final-closing {
  max-width: 760px;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.5;
}

.team-final-results {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 14px;
  margin: 26px 0;
}

.team-final-results p {
  min-width: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid #b8ddd6;
  border-radius: 17px;
  background: rgba(255, 255, 255, .82);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.team-final-results span {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.team-final-results strong {
  color: var(--teal-dark);
  font-size: clamp(25px, 4vw, 42px);
  line-height: 1.08;
}

.team-final-results small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.team-final-closing {
  color: var(--ink);
  font-weight: 700;
}

@keyframes team-final-arrival {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 901px) and (max-height: 800px) {
  #projection .final-message {
    margin-bottom: 12px;
    padding: 13px 28px 14px;
  }

  #projection .final-message h2 {
    margin: 3px 0 5px;
    font-size: 32px;
  }

  #projection .final-message > p:not(.final-kicker) {
    font-size: 16px;
  }

  #projection .final-message .final-closing {
    margin-top: 4px;
    font-size: 13px;
  }
}

@media (max-width: 700px) {
  .team-page {
    padding-top: 22px;
  }

  .team-shell.is-finished .team-heading {
    margin-bottom: 16px;
  }

  .team-final-results {
    grid-template-columns: 1fr;
    margin: 20px 0;
  }

  .team-final-results p {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #projection .final-message.just-finished,
  .team-final-card {
    animation: none;
  }
}

/* Série botanique associée aux cinq niveaux de progression. */
#projection .level-story {
  position: relative;
}

#projection .level-story > .level-illustration {
  display: block;
  width: clamp(95px, 9vw, 150px);
  height: clamp(95px, 9vw, 150px);
  object-fit: contain;
  opacity: 1;
  visibility: visible;
  z-index: 3;
  flex: none;
}

#host-summary .level-illustration {
  display: none;
}

@media (min-width: 901px) {
  #projection .level-story {
    padding-right: clamp(130px, 13vw, 210px);
    padding-left: clamp(130px, 13vw, 210px);
  }

  #projection .level-story > .level-illustration {
    position: absolute;
    top: 50%;
    left: clamp(24px, 3.4vw, 55px);
    transform: translateY(-50%);
  }

  #projection .level-story.level-up .level-illustration {
    animation: botanical-bloom 3.2s cubic-bezier(.2, .8, .2, 1);
  }
}

.team-final-level-illustration {
  display: block;
  width: clamp(76px, 18vw, 108px);
  height: clamp(76px, 18vw, 108px);
  margin: 0 auto 9px;
  object-fit: contain;
}

@keyframes botanical-bloom {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(.7) rotate(-4deg);
  }
  45% {
    opacity: 1;
    transform: translateY(-50%) scale(1.08) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0);
  }
}

@media (max-width: 900px) {
  #projection .level-story > .level-illustration {
    position: static;
    width: 112px;
    height: 112px;
    margin: 0 auto 8px;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #projection .level-story.level-up .level-illustration {
    animation: none;
  }
}