/* V4.3.8 — Charte bleu/or inspirée du design validé */
:root{
  --gold:#d4a53d;
  --gold-2:#f4d989;
  --gold-3:#a7751f;
  --navy:#0b2343;
  --navy-2:#133f74;
  --navy-3:#082140;
  --panel:#f9fbfe;
}
body{
  background:linear-gradient(180deg,#e8edf5 0%,#eff4f9 100%);
  color:#10294b;
}
.topbar{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(212,165,61,.18);
  box-shadow:0 8px 18px rgba(13,32,57,.05);
}
.brand{color:#0a274e;font-weight:1000;letter-spacing:.2px;}
.tabbtn,button,.secondary,.danger{
  border-radius:16px !important;
  font-weight:900;
}
.tabbtn{
  border:1px solid rgba(212,165,61,.18);
  background:#fff;
  color:#15345b;
}
.tabbtn.active{
  background:linear-gradient(180deg,#193f72 0%,#0a2648 100%);
  color:#fff;
  border-color:#15345b;
  box-shadow:0 10px 22px rgba(10,38,72,.18);
}
button,.secondary{
  background:linear-gradient(180deg,#173d70 0%,#0a2648 100%);
  color:#fff;
  border:1px solid rgba(9,34,65,.8);
  box-shadow:0 10px 18px rgba(9,34,65,.12);
}
button:hover,.secondary:hover,.tabbtn:hover{transform:translateY(-1px)}
.danger{
  background:#fff;
  color:#c83228;
  border:1px solid rgba(200,50,40,.28);
}
.panel,.groupBox,.hero,.card,.qualBox,.status,.todayCard,.miniCard,.rankingCard{
  border-color:rgba(212,165,61,.16) !important;
  box-shadow:0 10px 28px rgba(16,41,75,.06);
}
#knockout>.panel{background:transparent;border:none;box-shadow:none;padding:0;}
#knockout>.panel>h2{display:none;}
#knockoutContent{display:grid;gap:18px;}
.worldCupPanel{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  padding:18px 20px 34px;
  border:1px solid rgba(234,197,95,.48);
  background:
    linear-gradient(180deg,#183e73 0%,#10305d 18%,#0a2648 44%,#103a65 74%,#1d5d39 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 24px 60px rgba(4,13,26,.24);
}
.worldCupPanel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 17%, rgba(255,255,255,.26) 0, rgba(255,255,255,.12) 10%, rgba(255,255,255,.02) 20%, transparent 32%),
    radial-gradient(ellipse at 50% 96%, rgba(73,146,63,.42), rgba(47,117,53,.22) 32%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 15%, transparent 68%, rgba(24,91,48,.16) 74%, rgba(22,88,44,.38) 100%),
    linear-gradient(0deg, transparent 49.82%, rgba(255,247,219,.14) 50%, transparent 50.18%),
    linear-gradient(90deg, transparent 49.84%, rgba(255,247,219,.14) 50%, transparent 50.16%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.024) 0 42px, rgba(0,0,0,.015) 42px 84px);
  pointer-events:none;
}
.worldCupPanel::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:30%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(222,191,96,.22), transparent 40%),
    linear-gradient(180deg, transparent 0%, rgba(14,64,34,.08) 35%, rgba(20,80,39,.32) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 12px, rgba(0,0,0,.022) 12px 24px);
  pointer-events:none;
}
.worldCupPanel>*{position:relative;z-index:1;}
.worldCupHint{
  margin:4px 0 18px;
  text-align:center;
  font-size:14px;
  color:#f4e7bb;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.mirrorBracket{
  gap:18px;
  grid-template-columns:minmax(168px,1.08fr) minmax(126px,.78fr) minmax(110px,.62fr) minmax(228px,1.15fr) minmax(110px,.62fr) minmax(126px,.78fr) minmax(168px,1.08fr);
  padding:8px 10px 14px;
}
.roundHeader{
  text-align:center;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.9px;
  font-weight:1000;
  font-size:15px;
  margin-bottom:14px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(234,197,95,.35);
  background:linear-gradient(180deg,rgba(4,18,35,.78),rgba(8,30,56,.66));
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.bracketColumn{min-height:668px;display:flex;flex-direction:column;justify-content:space-evenly;gap:28px;min-width:0;position:relative;}
.bracketColumn.compact{justify-content:space-evenly;align-items:center;}
.bracketColumn.finalColumn{justify-content:center;align-items:center;}
.bracketStage{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible;
}
.bracketChoice{
  width:100%;
  min-height:48px;
  border-radius:14px;
  border:1px solid rgba(234,197,95,.58);
  background:linear-gradient(180deg,rgba(20,67,122,.98),rgba(9,39,75,.98));
  color:#fff;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:9px;
  justify-content:flex-start;
  text-align:left;
  font-weight:1000;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  transition:transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.bracketChoice:hover{transform:translateY(-1px);}
.bracketChoice.placeholder{
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.18));
  color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.32);
}
.bracketChoice.selected{
  background:linear-gradient(180deg,#f7d87d 0%, #cf9a2e 100%);
  color:#142744;
  border-color:#ffe59b;
  box-shadow:0 12px 24px rgba(0,0,0,.18), 0 0 22px rgba(247,216,125,.18);
}
.bracketChoice.selected .teamAbbr,
.bracketChoice.selected .teamText,
.bracketChoice.selected .teamInline{color:#142744;}
.bracketChoice.selected .flagIcon{box-shadow:0 0 0 1px rgba(20,39,68,.16);}
.teamInline.mini{display:inline-flex;align-items:center;gap:10px;}
.flagIcon{width:25px;height:18px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.28);background:#ffffff12;}
.teamAbbr{display:inline-block;font-size:18px;line-height:1;font-weight:1000;letter-spacing:.9px;}
.bracketColumn.compact .bracketChoice,.finalColumn .bracketChoice{width:100px;height:58px;justify-content:center;padding:8px 6px;}
.bracketColumn.compact .teamText,.finalColumn .teamText{display:none;}
.bracketColumn.compact .flagIcon,.finalColumn .flagIcon{width:28px;height:20px;margin-right:0;}
.bracketColumn.compact .teamAbbr,.finalColumn .teamAbbr{font-size:15px;}
.bracketStage::before{
  content:"";
  position:absolute;
  top:50%;
  width:18px;height:2px;
  background:linear-gradient(90deg, rgba(244,217,137,.98), rgba(244,217,137,.42));
  box-shadow:0 0 10px rgba(244,217,137,.62);
}
.bracketColumn.left .bracketStage::before{right:-18px;}
.bracketColumn.right .bracketStage::before{left:-18px;transform:scaleX(-1);}
.bracketColumn.midLeft::before,.bracketColumn.midRight::before{
  content:"";
  position:absolute;
  top:16%;bottom:16%;width:2px;
  background:linear-gradient(180deg, transparent, rgba(244,217,137,.72), rgba(244,217,137,.72), transparent);
  box-shadow:0 0 14px rgba(244,217,137,.24);
}
.bracketColumn.midLeft::before{right:-9px;}
.bracketColumn.midRight::before{left:-9px;}
.wcChampionWrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
.wcTrophyCard{
  width:240px;
  min-height:360px;
  border-radius:30px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:transparent;
  overflow:visible;
}
.wcTrophyCard::before{
  content:"";
  position:absolute;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,238,168,.78) 0%, rgba(255,211,82,.36) 34%, rgba(255,211,82,.10) 54%, transparent 72%);
  filter:blur(4px);
}
.wcTrophyCard::after{
  content:"";
  position:absolute;
  width:250px;height:250px;
  background:conic-gradient(from 10deg, transparent, rgba(255,223,122,.48), transparent, rgba(255,255,218,.28), transparent, rgba(255,223,122,.46), transparent);
  filter:blur(11px);
  opacity:.95;
  animation:slowSpin 14s linear infinite;
}
.wcTrophyImg{
  position:relative;z-index:2;
  width:195px;max-height:315px;object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(255,218,96,.9)) drop-shadow(0 0 38px rgba(255,218,96,.48)) drop-shadow(0 16px 22px rgba(0,0,0,.42));
}
.wcTrophyLabel{
  position:relative;z-index:3;
  margin-top:-14px;
  font-size:13px;
  line-height:1.3;
  color:#fff2c8;
  font-weight:1000;
  letter-spacing:.7px;
  text-transform:uppercase;
  text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.wcChampionWrap .bracketStage{width:164px;}
.wcChampionWrap .bracketChoice{width:164px;height:60px;justify-content:center;}
.knockoutIntro{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.knockoutIntro .panel{background:linear-gradient(180deg,#fffefb,#f7f9fc);border:1px solid rgba(212,165,61,.18);}
.sourceModal{position:fixed;inset:0;background:rgba(7,19,35,.58);display:flex;align-items:center;justify-content:center;z-index:99;padding:18px;}
.sourceModalCard{width:min(460px,100%);background:linear-gradient(180deg,#fffefb,#f8fafc);border-radius:22px;border:1px solid rgba(212,165,61,.26);padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.28);}
.sourceChoices button{background:linear-gradient(180deg,#173d70 0%,#0a2648 100%);border:1px solid #0a2648;color:#fff;}
.sourceChoices button:hover{background:linear-gradient(180deg,#f7d87d 0%, #cf9a2e 100%);color:#142744;border-color:#ffe59b;}
.sourceClose{margin-top:12px;width:100%;background:#fff;color:#15345b;border:1px solid rgba(212,165,61,.24)}
@media(max-width:1100px){
  .mirrorBracket{gap:12px;grid-template-columns:minmax(148px,1fr) minmax(110px,.76fr) minmax(96px,.6fr) minmax(208px,1.04fr) minmax(96px,.6fr) minmax(110px,.76fr) minmax(148px,1fr);}  
  .roundHeader{font-size:14px;padding:10px 8px;}
}
@media(max-width:900px){
  .knockoutIntro{grid-template-columns:1fr;}
}

/* V4.3.9 — seuls les vainqueurs du match affiché passent en or */
.bracketChoice:not(.selected):not(.placeholder){
  background:linear-gradient(180deg,rgba(20,67,122,.98),rgba(9,39,75,.98)) !important;
  color:#fff !important;
  border-color:rgba(234,197,95,.50) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.18) !important;
}
.bracketChoice.selected{
  background:linear-gradient(180deg,#f7d87d 0%,#cf9a2e 100%) !important;
  color:#142744 !important;
  border-color:#ffe59b !important;
  box-shadow:0 12px 24px rgba(0,0,0,.18),0 0 22px rgba(247,216,125,.22) !important;
}
.bracketChoice.selected .teamAbbr{color:#142744 !important;}
.bracketChoice.placeholder{background:rgba(255,255,255,.10) !important;color:rgba(255,255,255,.82) !important;}
.wcChampionWrap .bracketChoice.champion{border-radius:16px;}

/* V4.3.10 — affichage mobile du tableau 16es : défilement horizontal propre */
@media(max-width:900px){
  #knockoutContent .worldCupPanel{
    overflow-x:auto !important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding:16px 14px 24px;
    border-radius:22px;
  }

  #knockoutContent .worldCupPanel::-webkit-scrollbar{
    height:8px;
  }

  #knockoutContent .worldCupPanel::-webkit-scrollbar-track{
    background:rgba(255,255,255,.08);
    border-radius:999px;
  }

  #knockoutContent .worldCupPanel::-webkit-scrollbar-thumb{
    background:linear-gradient(90deg,#f7d87d,#cf9a2e);
    border-radius:999px;
  }

  #knockoutContent .worldCupHint{
    min-width:1180px;
    text-align:center;
    margin-bottom:14px;
  }

  #knockoutContent .mirrorBracket{
    width:1180px !important;
    min-width:1180px !important;
    max-width:none !important;
    grid-template-columns:160px 120px 96px 224px 96px 120px 160px !important;
    gap:16px !important;
    padding:8px 8px 16px !important;
  }

  #knockoutContent .bracketColumn{
    min-height:620px !important;
  }

  #knockoutContent .roundHeader{
    font-size:13px;
    padding:9px 8px;
  }

  #knockoutContent .bracketChoice{
    min-height:44px;
    padding:8px 10px;
  }

  #knockoutContent .teamAbbr{
    font-size:16px;
  }

  #knockoutContent .wcTrophyCard{
    width:210px;
    min-height:320px;
  }

  #knockoutContent .wcTrophyImg{
    width:170px;
    max-height:280px;
  }

  #knockoutContent .wcChampionWrap .bracketChoice{
    width:150px;
    height:58px;
  }
}