:root{
  --abyss:#0a0604; --obsidian:#140d09; --obsidian-2:#1b110b;
  --ember:#ff6a1a; --flame:#ff9a3c; --gold:#dca94f; --gold-soft:#caa663;
  --blood:#b3261e; --blood-deep:#7a1411; --ash:#5d5247; --ash-line:#2a2017;
  --parchment:#ede0c4; --parchment-dim:#b6a684; --smoke:#8a7c68;
  --ring:#c9a14a;
  --home:#ff8a2b; --draw:#6f6354; --away:#9a241c;
  --r:14px; --maxw:1180px;
  --font-d:"Cinzel",serif; --font-dd:"Cinzel Decorative",serif; --font-b:"EB Garamond",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--abyss); color:var(--parchment);
  font-family:var(--font-b); font-size:18px; line-height:1.55;
  overflow-x:hidden;
  background-image:
    radial-gradient(120% 80% at 50% 118%, rgba(255,90,20,.30), transparent 60%),
    radial-gradient(80% 55% at 50% -10%, rgba(120,30,10,.28), transparent 55%),
    radial-gradient(60% 45% at 85% 30%, rgba(70,20,10,.18), transparent 60%);
  background-attachment:fixed;
}
a{color:var(--gold)} a:hover{color:var(--flame)}
code{font-family:var(--font-d);color:var(--gold);font-size:.9em}

/* texture grain + braises */
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.embers{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ember{position:absolute;bottom:-12px;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,#ffd07a,#ff6a1a 60%,transparent);
  filter:blur(.3px);animation:rise linear infinite;opacity:0}
@keyframes rise{
  0%{transform:translateY(0) scale(1);opacity:0}
  10%{opacity:.9} 80%{opacity:.7}
  100%{transform:translateY(-102vh) translateX(var(--dx,0)) scale(.4);opacity:0}}

/* ---------- HERO ---------- */
.hero{position:relative;z-index:2;text-align:center;padding:7vh 20px 5vh;max-width:var(--maxw);margin:0 auto}
.eye-wrap{position:relative;width:min(340px,72vw);margin:0 auto 14px}
.eye-glow{position:absolute;inset:-60% -10% -40%;background:
  radial-gradient(closest-side,rgba(255,110,25,.55),rgba(255,60,10,.12),transparent 75%);
  filter:blur(8px);animation:breathe 5.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.95;transform:scale(1.08)}}
.eye{position:relative;width:100%;display:block;filter:drop-shadow(0 0 26px rgba(255,90,20,.5))}
.eye .lid{fill:#0c0705}
.eye .iris{transform-origin:100px 60px;animation:flick 4.2s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1)}48%{transform:scale(1.015)}52%{transform:scaleY(.96)}}
.eye .pupil{fill:#070302;animation:slit 7s ease-in-out infinite}
@keyframes slit{0%,100%{transform:scaleX(1)}45%{transform:scaleX(1.5)}55%{transform:scaleX(.8)}}
.eye .lid-line{fill:none;stroke:#3a2a16;stroke-width:1.4;opacity:.7}
.eye .pupil{transform-origin:100px 60px}

.title{font-family:var(--font-dd);font-weight:900;letter-spacing:.18em;
  font-size:clamp(46px,11vw,108px);margin:.1em 0 0;
  background:linear-gradient(180deg,#ffd98a,#ff7a1e 55%,#9c1f0c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 38px rgba(255,90,20,.35)}
.kicker{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.34em;
  font-size:clamp(11px,1.7vw,15px);color:var(--gold-soft);margin:.2em 0 1.1em}
.kicker span{color:var(--flame)}
.lede{max-width:620px;margin:0 auto;color:var(--parchment-dim);font-size:1.12rem}
.lede em{color:var(--gold);font-style:italic}
.hero-stats{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.hstat{text-align:center}
.hstat b{font-family:var(--font-d);font-size:1.9rem;color:var(--flame);display:block;line-height:1}
.hstat span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.scroll-cue{margin-top:34px;color:var(--ash);animation:bob 2.4s ease-in-out infinite;font-size:.8rem}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:1}}

main{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 18px 80px}

/* ---------- INSIGHTS ---------- */
.insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0 30px}
.insight{border:1px solid var(--ash-line);border-radius:var(--r);padding:16px 18px;
  background:linear-gradient(160deg,rgba(40,24,12,.6),rgba(14,9,6,.6));position:relative;overflow:hidden}
.insight::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--ember),var(--blood))}
.insight .lab{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)}
.insight .big{font-family:var(--font-d);font-size:1.18rem;color:var(--parchment);margin-top:4px;line-height:1.25}
.insight .sub{color:var(--gold-soft);font-size:.92rem}

/* ---------- CONTROLS ---------- */
.controls{position:sticky;top:0;z-index:30;display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:14px 16px;margin:0 -4px 14px;border-radius:var(--r);
  background:rgba(10,6,4,.82);backdrop-filter:blur(9px);border:1px solid var(--ash-line)}
.ctrl{display:flex;align-items:center;gap:8px}
.ctrl label{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
.search{flex:1;min-width:200px;position:relative}
.search .rune{position:absolute;left:12px;color:var(--ember);font-size:1.1rem}
#search{width:100%;padding:11px 14px 11px 36px;background:rgba(0,0,0,.4);
  border:1px solid var(--ash-line);border-radius:10px;color:var(--parchment);
  font-family:var(--font-b);font-size:1rem}
#search:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 2px rgba(255,106,26,.18)}
select{background:rgba(0,0,0,.4);color:var(--parchment);border:1px solid var(--ash-line);
  border-radius:10px;padding:10px 12px;font-family:var(--font-b);font-size:.95rem;cursor:pointer}
select:focus{outline:none;border-color:var(--ember)}
.toggle{cursor:pointer;user-select:none;color:var(--parchment-dim);font-size:.92rem}
.toggle input{accent-color:var(--ember);width:16px;height:16px}
.count{margin-left:auto;font-family:var(--font-d);color:var(--gold-soft);font-size:.85rem;letter-spacing:.08em}

.legend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;color:var(--smoke);
  font-size:.8rem;margin:0 4px 22px}
.legend i.sw{display:inline-block;width:14px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}
.sw.home{background:var(--home)} .sw.draw{background:var(--draw)} .sw.away{background:var(--away)}
.legend .sep{flex:1;height:1px;background:var(--ash-line);min-width:20px}
.lg-model{color:var(--flame)} .lg-elo{color:var(--smoke)}

/* ---------- GRID + CARTES ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
.card{border:1px solid var(--ash-line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(165deg,var(--obsidian-2),var(--obsidian));
  box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .25s,border-color .25s,box-shadow .25s;
  opacity:0;transform:translateY(14px);animation:reveal .5s forwards}
@keyframes reveal{to{opacity:1;transform:none}}
.card:hover{transform:translateY(-4px);border-color:rgba(255,106,26,.45);
  box-shadow:0 16px 40px rgba(255,70,15,.14),0 10px 30px rgba(0,0,0,.6)}
.card .top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 0;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
.card .verdict{color:var(--gold-soft)}

.match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:8px 16px 4px}
.team{font-family:var(--font-d);font-size:1.06rem;line-height:1.15}
.team.h{text-align:right} .team.a{text-align:left}
.score{font-family:var(--font-dd);font-weight:900;font-size:1.7rem;color:var(--flame);
  padding:2px 12px;white-space:nowrap;text-shadow:0 0 16px rgba(255,106,26,.4)}
.xg{display:flex;justify-content:center;gap:6px;color:var(--smoke);font-size:.78rem;padding:0 16px 8px}
.xg b{color:var(--gold-soft);font-family:var(--font-d)}

/* barre 1X2 */
.bar{height:30px;display:flex;border-radius:8px;overflow:hidden;margin:6px 16px;border:1px solid rgba(0,0,0,.4)}
.seg{display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;
  color:#1a0c04;min-width:0;transition:flex-basis .4s ease}
.seg.h{background:linear-gradient(180deg,#ffae54,var(--home))}
.seg.d{background:linear-gradient(180deg,#7a6e5d,var(--draw));color:#e9dcc4}
.seg.a{background:linear-gradient(180deg,#c33327,var(--away));color:#ffe3d8}
.seg span{padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barlab{display:flex;justify-content:space-between;padding:0 18px;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--smoke);margin-top:2px}
/* mini barre Elo */
.elo-row{display:flex;align-items:center;gap:10px;padding:4px 16px 2px}
.elo-row .tag{font-family:var(--font-d);font-size:.66rem;letter-spacing:.14em;color:var(--smoke);min-width:30px}
.ebar{flex:1;height:8px;display:flex;border-radius:5px;overflow:hidden;opacity:.85}
.ebar .h{background:var(--home)} .ebar .d{background:var(--draw)} .ebar .a{background:var(--away)}
.diverge-flag{margin:6px 16px 0;font-size:.78rem;color:var(--ember);display:flex;gap:6px;align-items:center}
.diverge-flag::before{content:"⚔";}

/* expand */
.more{max-height:0;overflow:hidden;transition:max-height .42s ease}
.card.open .more{max-height:760px}
.card.open{border-color:rgba(255,106,26,.5)}
.toggle-row{display:flex;justify-content:center;padding:6px 0 12px}
.toggle-btn{background:none;border:1px solid var(--ash-line);color:var(--gold-soft);
  font-family:var(--font-d);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 16px;border-radius:20px;cursor:pointer;transition:.2s}
.toggle-btn:hover{border-color:var(--ember);color:var(--flame)}
.detail{padding:0 16px 14px;border-top:1px solid var(--ash-line);margin-top:4px}
.detail h4{font-family:var(--font-d);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-soft);margin:14px 0 8px;display:flex;align-items:center;gap:8px}
.detail h4::after{content:"";flex:1;height:1px;background:var(--ash-line)}
.scorers{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.sc-col .who{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:.86rem}
.sc-col .who .nm{flex:1;color:var(--parchment-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-col .who .pc{font-family:var(--font-d);color:var(--gold);font-size:.8rem;min-width:34px;text-align:right}
.sc-col .who .fl{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.06);flex-basis:60px;flex-shrink:0;overflow:hidden}
.sc-col .who .fl i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#ffb14d,var(--ember));border-radius:3px}
.sc-col .ttl{font-size:.72rem;color:var(--smoke);text-transform:uppercase;letter-spacing:.1em;margin-bottom:2px}
.lines{display:flex;flex-wrap:wrap;gap:6px}
.line{display:flex;align-items:center;gap:7px;background:rgba(0,0,0,.3);border:1px solid var(--ash-line);
  border-radius:8px;padding:5px 9px;font-size:.82rem}
.line b{font-family:var(--font-d);color:var(--parchment)}
.line .lp{color:var(--gold-soft);font-size:.76rem}

.empty{text-align:center;color:var(--smoke);font-style:italic;margin:50px 0}

/* ---------- FOOTER ---------- */
.foot{position:relative;z-index:2;text-align:center;padding:40px 20px 60px;color:var(--smoke)}
.foot p:first-child{font-family:var(--font-d);letter-spacing:.16em;color:var(--gold-soft)}
.foot .muted{font-size:.82rem;margin-top:6px}

@media(max-width:560px){
  body{font-size:17px}
  .grid{grid-template-columns:1fr}
  .controls{position:static}
  .scorers{grid-template-columns:1fr}
  .team{font-size:.96rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .card{opacity:1;transform:none}
}

/* ===== MATCHS DÉJÀ JOUÉS — « la prophétie jugée » ===== */
.card.played{position:relative;
  background:linear-gradient(165deg,#14141b,#0c0b0e);border-color:#2b2930}
.card.played:hover{border-color:#4a4654;box-shadow:0 16px 40px rgba(0,0,0,.6)}
.card.played::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent,#555);opacity:.85}
.card.played.right{--accent:linear-gradient(90deg,#caa84f,#9ec06a)}
.card.played.wrong{--accent:linear-gradient(90deg,#615f6c,#b3514a)}

.badge-ft{font-family:var(--font-d);font-size:.6rem;letter-spacing:.2em;padding:3px 10px;
  border:1px solid #3a3742;border-radius:20px;color:#9a93a4;background:rgba(255,255,255,.03)}

.match.res .realscore{font-family:var(--font-dd);font-weight:900;font-size:2rem;color:var(--parchment);
  padding:2px 14px;display:flex;align-items:center;gap:9px;white-space:nowrap}
.match.res .realscore i{font-style:normal;color:var(--smoke);font-size:1.1rem}
.card.played.right .match.res .realscore{text-shadow:0 0 20px rgba(200,168,79,.5)}

.verdict-strip{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:2px 16px 8px}
.vd{font-size:.74rem;padding:3px 11px;border-radius:20px;border:1px solid transparent}
.vd.ok{color:#c2d488;background:rgba(150,180,90,.10);border-color:rgba(150,180,90,.32)}
.vd.no{color:#d2897b;background:rgba(150,60,50,.10);border-color:rgba(150,60,50,.32)}
.vd.exact{color:#1a0c04;background:linear-gradient(180deg,#ffd98a,#ff9a3c);font-weight:600}
.vd.pred{color:var(--smoke);border-color:var(--ash-line)}

/* le segment 1X2 du résultat réel ressort, les autres s'éteignent */
.card.played .seg:not(.hit){opacity:.45;filter:saturate(.55)}
.seg.hit{box-shadow:inset 0 0 0 2px rgba(255,245,225,.9),0 0 14px rgba(255,200,120,.3);
  filter:saturate(1.25) brightness(1.1);z-index:1}

/* buteurs prédits qui ont marqué */
.sc-col .who.hit{background:rgba(220,168,79,.08);border-radius:6px}
.sc-col .who.hit .nm{color:var(--gold);font-weight:500}
.sc-col .who .nm.dim{color:var(--smoke);font-style:italic}
.detail h4 .hint{font-size:.64rem;color:var(--smoke);text-transform:none;letter-spacing:normal;margin-left:6px}

.vd.pred b{color:var(--gold-soft);font-weight:600}

/* ===== bouton musique d'ambiance ===== */
.music-btn{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;align-items:center;gap:9px;
  padding:9px 16px 9px 12px;border-radius:30px;cursor:pointer;
  background:rgba(12,8,5,.82);backdrop-filter:blur(8px);border:1px solid var(--ash-line);
  color:var(--gold-soft);font-family:var(--font-d);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;transition:.25s;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.music-btn:hover{border-color:var(--ember);color:var(--flame)}
.music-btn .eyeico{width:18px;height:12px;border-radius:50%;position:relative;flex-shrink:0;
  background:radial-gradient(circle,#4a3320,#160c05);transition:.3s}
.music-btn .eyeico::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:3px;height:9px;border-radius:50%;background:#0a0604}
.music-btn.on{border-color:var(--ember);color:var(--flame);animation:mpulse 3.4s ease-in-out infinite}
.music-btn.on .eyeico{background:radial-gradient(circle,#ffe7a8,#ff6a1a 60%,#7c1908);
  box-shadow:0 0 13px rgba(255,106,26,.75)}
@keyframes mpulse{0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.5)}50%{box-shadow:0 8px 32px rgba(255,90,20,.38)}}
@media(max-width:560px){.music-btn .mlabel{display:none}.music-btn{padding:11px;right:14px;bottom:14px}}