/* FBO One World - app participant. Une colonne, gros texte, contraste maximal. */
:root{
  --night:#0C1322; --panel:#131D33; --panel2:#0F1830; --line:#26324E;
  --gold:#D9B75C; --gold-deep:#A8862F; --ivory:#F3EFE4; --dim:#8C95A9;
  --alert:#E4574F; --ok:#58C08A;
  --bar:calc(54px + env(safe-area-inset-bottom));
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* L'attribut hidden doit toujours gagner : une regle d'auteur avec display
   (.celebration{display:flex}) est plus specifique que le [hidden] du navigateur,
   et l'overlay resterait affiche par-dessus toute la page. */
[hidden]{display:none !important}
html,body{margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--night); color:var(--ivory);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--bar);
  overflow-x:hidden;
}
button,input{font-family:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

main{max-width:560px; margin:0 auto; padding:0 18px}

/* ---------- hero : l'information du moment ---------- */
.hero{
  min-height:calc(100svh - var(--bar));
  display:flex; flex-direction:column; justify-content:center;
  padding:26px 0 22px; gap:16px; text-align:left;
}
.kicker{
  color:var(--gold); font-size:11px; font-weight:800; letter-spacing:.3em;
  text-transform:uppercase;
}
.hero h1{
  margin:0; font-size:clamp(38px,12.5vw,64px); line-height:.96; font-weight:800;
  letter-spacing:-.01em; text-transform:uppercase;
}
.hero h1 .gold{color:var(--gold); display:block}
.hero p.lede{margin:0; color:var(--dim); font-size:16.5px; line-height:1.5; max-width:34ch}

/* compte a rebours */
.count{display:flex; align-items:baseline; gap:10px; font-variant-numeric:tabular-nums}
.count .val{
  font-size:clamp(46px,17vw,86px); font-weight:800; color:var(--gold);
  letter-spacing:.02em; line-height:1;
}
.count .unit{color:var(--dim); font-size:12px; font-weight:800; letter-spacing:.22em}
.count.small .val{font-size:34px; color:var(--ivory)}
.countlabel{color:var(--dim); font-size:11px; font-weight:800; letter-spacing:.24em; text-transform:uppercase}

/* le seul bouton dore de l'ecran */
.cta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:64px; border:none; border-radius:16px;
  background:var(--gold); color:#201709; font-size:17.5px; font-weight:800;
  letter-spacing:.01em; padding:12px 18px; text-align:center;
  box-shadow:0 10px 30px rgba(217,183,92,.16);
}
.cta:active{transform:scale(.985)}
.cta .arrow{font-size:20px; line-height:1}
.ctahint{color:var(--dim); font-size:13.5px; line-height:1.45; margin:-4px 0 0}

/* podium express dans le hero */
.top3{display:grid; gap:8px}
.top3 .t3{
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  border:1px solid var(--line); border-radius:13px; background:var(--panel);
}
.top3 .t3 .p{
  flex:0 0 26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:900; background:var(--panel2); color:var(--dim);
}
.top3 .t3.r1 .p{background:var(--gold); color:#201709}
.top3 .t3.r2 .p{background:#C9CFDA; color:#1A2130}
.top3 .t3.r3 .p{background:#C68A54; color:#241104}
.top3 .t3 .n{flex:1; min-width:0; font-weight:800; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.top3 .t3 .s{font-weight:800; font-size:22px; color:var(--gold); font-variant-numeric:tabular-nums}

/* numeros tires en geant */
.drawn-big{display:flex; flex-wrap:wrap; gap:10px}
.drawn-big span{
  font-size:clamp(34px,11vw,56px); font-weight:800; color:var(--gold);
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
  border:1px solid rgba(217,183,92,.35); border-radius:14px; padding:6px 14px;
}
.drawn-big span.fresh{animation:pop .5s ease}
@keyframes pop{from{transform:scale(.7); opacity:0} to{transform:scale(1); opacity:1}}

/* ---------- modules ---------- */
.mod{
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:18px; margin-bottom:14px;
}
.mod > h2{
  margin:0 0 14px; font-size:11px; font-weight:800; letter-spacing:.24em;
  color:var(--gold); text-transform:uppercase;
}
.mod.flash{animation:flash 1.1s ease}
@keyframes flash{0%{border-color:var(--gold)} 100%{border-color:var(--line)}}
.muted{color:var(--dim); font-size:14px; line-height:1.5; margin:10px 0 0}

.row{display:flex; align-items:center; gap:12px; padding:12px 2px; border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row .rk{
  flex:0 0 32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:14px; color:var(--dim); border:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.row.r1 .rk{background:var(--gold); border-color:var(--gold); color:#201709}
.row.r2 .rk{background:#C9CFDA; border-color:#C9CFDA; color:#1A2130}
.row.r3 .rk{background:#C68A54; border-color:#C68A54; color:#241104}
.row .nm{flex:1; min-width:0; font-weight:800; font-size:16.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .sc{font-weight:800; font-size:23px; color:var(--gold); font-variant-numeric:tabular-nums}
.row.me{background:rgba(217,183,92,.09); border-radius:11px; padding-left:8px; padding-right:8px; border-bottom-color:transparent}
.row.me .nm::after{content:"TOI"; margin-left:9px; font-size:9.5px; letter-spacing:.16em; color:#201709; background:var(--gold); padding:3px 6px; border-radius:5px; vertical-align:middle}

.field{
  width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:13px;
  padding:15px; font-size:16px; color:var(--ivory);
}
.field::placeholder{color:#5B6478}
.field.num{text-align:center; font-size:30px; font-weight:800; color:var(--gold); letter-spacing:.1em; font-variant-numeric:tabular-nums}
.lbl{display:block; font-size:10.5px; font-weight:800; letter-spacing:.16em; color:var(--dim); margin:0 0 7px; text-transform:uppercase}
.stack > * + *{margin-top:12px}

.nums{display:flex; flex-wrap:wrap; gap:8px}
.nums span{
  border:1px solid var(--line); background:var(--panel2); border-radius:10px;
  padding:9px 12px; font-size:19px; font-weight:800; color:var(--ivory);
  font-variant-numeric:tabular-nums;
}
.nums span.mine{background:var(--gold); border-color:var(--gold); color:#201709}

.win{
  border:1px solid var(--gold); background:rgba(217,183,92,.1); color:var(--gold);
  border-radius:13px; padding:14px; font-weight:800; font-size:15px; text-align:center; letter-spacing:.02em;
}

.prog{display:grid; gap:0}
.prog div{display:flex; gap:14px; align-items:baseline; padding:11px 2px; border-bottom:1px solid var(--line)}
.prog div:last-child{border-bottom:none}
.prog b{flex:0 0 58px; color:var(--gold); font-size:16px; font-variant-numeric:tabular-nums}
.prog span{color:var(--ivory); font-size:15px}
.prog div.done{opacity:.42}
.prog div.done b{color:var(--dim)}

/* formulaire after */
.legal{color:var(--dim); font-size:12.5px; line-height:1.5; margin:12px 0 0}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

/* ---------- bandeau follow, permanent et discret ---------- */
.follow{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; justify-content:center; gap:9px;
  height:var(--bar); padding-bottom:env(safe-area-inset-bottom);
  background:rgba(10,16,29,.94); border-top:1px solid var(--line);
  backdrop-filter:blur(10px); text-decoration:none;
}
.follow-k{color:var(--dim); font-size:10.5px; font-weight:800; letter-spacing:.24em}
.follow-v{color:var(--gold); font-size:13.5px; font-weight:800; letter-spacing:.06em}

/* ---------- hors ligne ---------- */
.offline{
  position:fixed; top:0; left:0; right:0; z-index:50; text-align:center;
  background:var(--alert); color:#22090B; font-size:12.5px; font-weight:800;
  letter-spacing:.1em; padding:7px; text-transform:uppercase;
}

/* ---------- celebration plein ecran ---------- */
/* Masquee par defaut, affichee par la classe .open : aucune dependance a la
   cascade ni a l'attribut hidden, que la regle display de ce bloc ecraserait. */
.celebration{
  position:fixed; inset:0; z-index:90; background:var(--night);
  display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:30px 24px calc(30px + env(safe-area-inset-bottom)); gap:18px;
}
.celebration.open{display:flex}
.celebration .big{
  font-size:clamp(44px,15vw,80px); font-weight:800; color:var(--gold); line-height:.98;
  text-transform:uppercase; letter-spacing:-.01em;
}
.celebration .num{
  font-size:clamp(76px,30vw,150px); font-weight:800; color:var(--ivory);
  font-variant-numeric:tabular-nums; line-height:1; letter-spacing:.04em;
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.045)}}
.celebration p{margin:0; color:var(--ivory); font-size:19px; font-weight:700; line-height:1.4; max-width:22ch}
.celebration button{
  margin-top:6px; min-height:58px; padding:0 30px; border-radius:15px; border:1px solid var(--line);
  background:transparent; color:var(--ivory); font-size:16px; font-weight:800;
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}