/* Correction en direct sur la TV — « façon émission de jeu ». 1 em = 16 px à 1920×1080, tout se met à l'échelle (1280×720 → 2560×1440). */
#vue-correction, #vue-transition { position: fixed; inset: 0; z-index: 50; }
.ctv {
  --or: #ffd23f; --or-fonce: #b38600; --nuit: #1b0a3a; --verre: rgba(20, 6, 52, .55); --trait: rgba(255,255,255,.16);
  --bon: #1b9c58; --bon-clair: #6ff0a8; --mauvais: #ff8087;
  font-size: max(9px, min(calc(100vw / 120), calc(100vh / 67.5)));
  position: absolute; inset: 0; overflow: hidden; color: #fff;
  display: grid; grid-template-rows: auto 1fr auto; line-height: 1.25;
  background: radial-gradient(ellipse 80% 70% at 50% -10%, #5a1fb3 0%, transparent 60%), linear-gradient(165deg, #240c4d 0%, #3a1480 100%);
}
.ctv * { box-sizing: border-box; }
.ctv kbd { font: inherit; font-weight: 800; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-bottom-width: 3px; border-radius: .35em; padding: .05em .5em; }
.ctv sup { font-size: .6em; }
.ctv .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ctv-fond { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ctv-fond::before, .ctv-fond::after { content: ""; position: absolute; width: 60em; height: 60em; border-radius: 50%; filter: blur(6em); opacity: .35; }
.ctv-fond::before { background: #ff4d9a; left: -20em; bottom: -30em; animation: derive 24s ease-in-out infinite alternate; }
.ctv-fond::after { background: #2f7bff; right: -22em; top: -28em; animation: derive 30s ease-in-out infinite alternate-reverse; }
@keyframes derive { to { transform: translate(8em, -5em) scale(1.15); } }

/* barre de progression + commandes */
.ctv-haut { height: .35em; background: rgba(255,255,255,.1); position: relative; z-index: 2; }
.ctv-haut i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff8a3d, var(--or)); transition: width .4s; }
.ctv-barre { position: relative; z-index: 3; display: flex; align-items: center; gap: 2em; padding: .7em 2.2em; background: rgba(15, 4, 40, .72); border-top: 1px solid var(--trait); }
.ctv-etat { font-weight: 800; font-size: 1.15em; min-width: 14em; color: var(--or); }
.ctv-aide { flex: 1; text-align: center; font-size: 1em; color: rgba(255,255,255,.78); }
.ctv-boutons { display: flex; gap: .7em; align-items: center; }
.ctv-btn { font: inherit; font-weight: 800; font-size: 1.1em; color: #fff; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.3); border-radius: .8em; padding: .5em 1.1em; min-height: 2.6em; cursor: pointer; transition: transform .15s, background .15s; }
.ctv-btn:hover:not(:disabled) { background: rgba(255,255,255,.26); transform: translateY(-1px); }
.ctv-btn:disabled { opacity: .35; cursor: default; }
.ctv-btn:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.ctv-btn-suite { background: var(--or); color: #2b1055; border-color: var(--or); box-shadow: 0 .25em 0 var(--or-fonce); padding: .5em 1.6em; }
.ctv-btn-suite:hover:not(:disabled) { background: #ffe07a; }
.ctv-btn-suite.grand { font-size: 1.8em; padding: .6em 1.8em; }
.ctv-confettis { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }

.ctv-scene { position: relative; z-index: 1; min-height: 0; padding: 1.6em 3em 1.4em; display: flex; flex-direction: column; gap: 1.1em; }

/* entrées animées : toutes en « from » → l'état final est l'état de base (prefers-reduced-motion = rien à faire) */
@keyframes entree { from { opacity: 0; transform: translateY(1.2em); } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }
@keyframes fondu { from { opacity: 0; } }
@keyframes croitre { from { width: 0; } }
.ctv-scene > * { animation: entree .45s cubic-bezier(.2,.8,.2,1) backwards; }

/* ───── accueil ───── */
.acc { margin: auto; text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.4em; }
.acc-rayons { position: absolute; width: 90em; height: 90em; left: 50%; top: 50%; margin: -45em 0 0 -45em; z-index: -1; opacity: .18;
  background: repeating-conic-gradient(from 0deg, var(--or) 0 6deg, transparent 6deg 24deg); border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 0 20%, transparent 62%); mask: radial-gradient(circle, #000 0 20%, transparent 62%); animation: tourne 80s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.acc-kicker { font-size: 1.8em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.acc-titre { font-size: 8em; line-height: .95; font-weight: 900; letter-spacing: -.02em; margin: 0; text-shadow: 0 .06em 0 rgba(0,0,0,.35), 0 0 .6em rgba(255,210,63,.35); animation: pop .6s cubic-bezier(.2,1.3,.4,1) backwards; }
.acc-chiffres { display: flex; gap: 3em; margin-top: .4em; }
.acc-chiffres > div { display: flex; flex-direction: column; align-items: center; background: var(--verre); border: 1px solid var(--trait); border-radius: 1em; padding: .5em 1.6em; min-width: 9em; }
.acc-chiffres b { font-size: 3.6em; line-height: 1.1; color: var(--or); font-variant-numeric: tabular-nums; }
.acc-chiffres span { font-size: 1.5em; font-weight: 700; }
.acc-texte { font-size: 1.9em; max-width: 30em; margin: 0; color: rgba(255,255,255,.92); }
.acc-go { font-size: 1.6em; font-weight: 700; margin-top: .6em; animation: respire 1.8s ease-in-out infinite; }
@keyframes respire { 50% { opacity: .55; } }

/* ───── question : en-tête commun ───── */
.q-entete { display: flex; align-items: center; gap: 1.2em; flex-wrap: wrap; }
.q-entete .badges-q { margin: 0; justify-content: flex-start; }
.q-entete .badges-q.grand .badge-cat, .q-entete .badges-q.grand .badge-niv { font-size: 1.45em; padding: .3em .9em; }
.q-entete .badges-q.grand .badge-niv .points i { width: .75em; height: .75em; }
.q-num { font-size: 1.8em; font-weight: 800; background: var(--or); color: #2b1055; border-radius: 999px; padding: .12em .8em; }
.q-num b { font-size: 1.15em; }

/* étape 1 : énoncé */
.q-carte { background: #fff; color: #1d1d2b; border-radius: 1.2em; padding: 1.1em 1.8em; box-shadow: 0 .4em 0 rgba(0,0,0,.25), 0 1em 3em rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; text-align: center; min-height: 9em; }
.q-carte.avec-image { display: grid; grid-template-columns: 1fr auto; gap: 2em; text-align: left; }
.q-img img { display: block; max-height: 19em; max-width: 26em; border-radius: .7em; background: #eee; }
.q-texte { margin: 0; font-weight: 800; }
.q-texte.xl { font-size: 3em; } .q-texte.l { font-size: 2.55em; } .q-texte.m { font-size: 2.2em; }
.avec-image .q-texte.xl { font-size: 2.7em; } .avec-image .q-texte.l { font-size: 2.35em; }
.ctv-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: .9em 1.1em; flex: 1; min-height: 0; }
.ctv-tuiles.n2 { grid-template-rows: 1fr; }
.ctv-tuile { display: flex; align-items: center; gap: .8em; padding: .5em 1em; border-radius: .9em; color: #fff; font-weight: 800; font-size: 2.9em; box-shadow: 0 .1em 0 rgba(0,0,0,.28); min-height: 2.3em; position: relative; overflow: hidden; }
.ctv-tuile .forme { width: 1.4em; height: 1.4em; font-size: 1em; }
.ctv-tuile .t-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
.ctv-tuile.c2 { color: #1d1d2b; } .ctv-tuile.c2 .forme svg { fill: #1d1d2b; } .ctv-tuile.c2 .forme .lettre { color: #fff; }
.ctv-tuile .coche { font-size: 1.3em; line-height: 1; }
.ctv-tuiles .ctv-tuile { animation: entree .4s backwards; }
.ctv-tuiles .ctv-tuile:nth-child(2) { animation-delay: .08s; } .ctv-tuiles .ctv-tuile:nth-child(3) { animation-delay: .16s; } .ctv-tuiles .ctv-tuile:nth-child(4) { animation-delay: .24s; }
.q-suspense { text-align: center; font-size: 3.2em; font-weight: 900; color: var(--or); letter-spacing: .02em; text-shadow: 0 0 .5em rgba(255,210,63,.45); animation: entree .45s .4s backwards; }
.q-suspense i { display: inline-block; width: .22em; height: .22em; border-radius: 50%; background: var(--or); margin-left: .25em; animation: saute 1.2s ease-in-out infinite; }
.q-suspense i:nth-of-type(2) { animation-delay: .15s; } .q-suspense i:nth-of-type(3) { animation-delay: .3s; }
@keyframes saute { 40% { transform: translateY(-.35em); } }
.closest-q { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; background: var(--verre); border: 2px dashed rgba(255,210,63,.6); border-radius: 1.2em; text-align: center; }
.cq-titre { font-size: 4em; font-weight: 900; color: var(--or); }
.cq-sous { font-size: 2em; font-weight: 600; max-width: 28em; }

/* étape 2 : révélation */
.q-rappel { margin: 0; font-size: 2.2em; font-weight: 700; line-height: 1.2; color: #fff; text-shadow: 0 .05em .1em rgba(0,0,0,.3); }
.reveal { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.45fr 1fr; gap: 1.6em; }
.col-g, .col-d { display: flex; flex-direction: column; gap: 1em; min-height: 0; }
.reps { display: flex; flex-direction: column; gap: 1em; flex: 1; min-height: 0; }
.rep { display: grid; grid-template-columns: 1.15fr 1fr; gap: .8em; align-items: stretch; flex: 1; max-height: 10em; animation: entree .4s backwards; animation-delay: calc(var(--i) * .06s); }
.rep .ctv-tuile { font-size: 2.2em; min-height: 0; transition: opacity .3s; }
.rep.faux .ctv-tuile { opacity: .42; filter: saturate(.6); animation: estompe .5s 1.2s backwards; }
.rep.bon .ctv-tuile { outline: .13em solid #fff; outline-offset: .06em; box-shadow: 0 0 0 .32em rgba(255,210,63,.55), 0 0 2.4em .3em rgba(255,210,63,.55); transform: scale(1.025); animation: illumine .7s 1.2s cubic-bezier(.2,1.5,.4,1) backwards; z-index: 1; }
@keyframes estompe { from { opacity: 1; filter: none; } }
@keyframes illumine { from { transform: none; outline-color: transparent; box-shadow: none; } }
.rep-piste {  background: rgba(0,0,0,.28); border-radius: .7em; position: relative; overflow: hidden; display: flex; align-items: center; }
.rep-piste i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: rgba(255,255,255,.4); border-radius: .7em; animation: croitre .8s cubic-bezier(.2,.8,.2,1) .15s backwards; }
.rep.bon .rep-piste i { background: linear-gradient(90deg, #2fd27d, var(--bon-clair)); animation-delay: .15s; }
.rep-piste b { position: relative; margin-left: auto; padding-right: .6em; font-size: 2.6em; font-variant-numeric: tabular-nums; text-shadow: 0 .05em .15em rgba(0,0,0,.6); }
.banniere { display: flex; align-items: center; gap: .9em; border-radius: 1.1em; padding: .6em 1.2em; font-weight: 800; border: 2px solid transparent; animation: pop .55s .9s cubic-bezier(.2,1.4,.4,1) backwards; }
.b-emoji { font-size: 3.6em; line-height: 1; }
.b-titre { font-size: 3em; line-height: 1; font-weight: 900; letter-spacing: -.01em; }
.b-sous { font-size: 1.5em; font-weight: 700; margin-top: .15em; }
.banniere.piege { background: #ffe8ec; color: #8a0f2c; border-color: #ff4d6d; }
.banniere.fastoche { background: #dcf9e8; color: #0d5c33; border-color: #2fd27d; }
.banniere.clivante { background: #fff4cc; color: #6a4a00; border-color: var(--or); }
.banniere.neutre { background: rgba(255,255,255,.14); color: #fff; border-color: var(--trait); }
.banniere.neutre .b-titre { font-size: 2.3em; }
.groupe { background: var(--verre); border: 1px solid var(--trait); border-radius: 1.1em; padding: .8em 1.1em 1em; }
.groupe h3 { margin: 0 0 .6em; font-size: 1.4em; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.groupe.ok { border-color: rgba(111,240,168,.6); background: rgba(27,156,88,.22); }
.groupe.ok .puce { font-size: 2.1em; }
.groupe.ok.dense .puce { font-size: 1.5em; }
.groupe.ok.liste .puces { flex-direction: column; flex-wrap: nowrap; gap: .4em; }
.groupe.ok.liste .puce { width: 100%; font-size: 2.5em; padding: .05em .7em .05em .9em; }
.groupe.ok.liste .puce em { margin-left: auto; }
.groupe.ok h3 { color: var(--bon-clair); }
.groupe.ko h3 { color: rgba(255,255,255,.7); }
.groupe .rien { font-size: 1.6em; color: rgba(255,255,255,.8); font-style: italic; }
.puces { display: flex; flex-wrap: wrap; gap: .5em .6em; align-content: flex-start; }
.puce { display: inline-flex; align-items: center; gap: .45em; border-radius: 999px; padding: .12em .8em; font-size: 1.6em; animation: pop .4s cubic-bezier(.2,1.4,.4,1) var(--d, 1.4s) backwards; line-height: 1.35; }
.puce b { font-weight: 800; }
.puce.ok { background: #fff; color: #0d5c33; }
.puce.ok em { font-style: normal; font-weight: 900; font-size: .78em; background: var(--or); color: #2b1055; border-radius: 999px; padding: .02em .5em; }
.puce.ko { background: rgba(255,255,255,.1); color: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.2); }
.puce.ko b { font-weight: 600; }
.puce small { font-size: .58em; font-weight: 800; opacity: .85; border: 1px solid currentColor; border-radius: .4em; padding: 0 .35em; }
.groupe.dense .puce { font-size: 1.25em; }
.groupe.ko.dense .puce { font-size: 1.15em; }
.puce.reste-puce { background: transparent; color: rgba(255,255,255,.85); font-style: italic; border: 0; }
.reveal .col-d .groupe { min-height: 0; overflow: hidden; }
/* "plus proche" */
.closest-r .col-g { justify-content: flex-start; gap: 1.2em; }
.closest-r .groupe.props { flex: 0 0 auto; align-self: start; width: 100%; }
.cible { background: #fff; color: #1d1d2b; border-radius: 1.3em; padding: .8em 1em; text-align: center; box-shadow: 0 .3em 0 rgba(0,0,0,.25), 0 0 3em rgba(255,210,63,.5); animation: pop .6s .1s cubic-bezier(.2,1.4,.4,1) backwards; }
.c-etiq { font-size: 1.6em; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #5a3a9a; }
.c-val { font-size: 8.5em; font-weight: 900; line-height: 1.05; color: #46178f; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.c-unite { font-size: 2.2em; font-weight: 800; color: #5a3a9a; }
.groupe.props { flex: 1; display: flex; flex-direction: column; gap: .35em; }
.prop { display: grid; grid-template-columns: 1.6em 1fr auto auto 4.2em; gap: .6em; align-items: center; font-size: 1.65em; padding: .22em .7em; border-radius: .6em; background: rgba(255,255,255,.08); animation: entree .4s var(--d) backwards; }
.prop.ok { background: rgba(27,156,88,.45); outline: 2px solid var(--bon-clair); }
.p-rang { font-weight: 900; color: var(--or); text-align: center; }
.p-nom { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-val { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.p-ecart { font-size: .8em; color: rgba(255,255,255,.8); min-width: 4em; text-align: right; font-variant-numeric: tabular-nums; }
.p-pts { font-style: normal; font-weight: 900; color: var(--or); text-align: right; }
.reste { margin-top: .3em; font-size: 1.35em; color: rgba(255,255,255,.8); }

/* étape 3 : explication + classement */
.expl { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.08fr 1fr; gap: 2em; }
.expl-g { display: flex; flex-direction: column; gap: 1.1em; min-height: 0; justify-content: flex-start; padding-top: .4em; }
.bonne-rep { background: var(--bon); border-radius: 1em; padding: .5em 1.1em; display: flex; flex-direction: column; box-shadow: 0 .18em 0 rgba(0,0,0,.25); }
.br-etiq { font-size: 1.25em; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #dfffee; }
.br-val { font-size: 3em; font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; }
.expl-texte { margin: 0; font-size: 2.4em; line-height: 1.35; font-weight: 600; }
.expl-texte.long { font-size: 1.8em; }
.anecdote { background: #fff6cf; color: #2d2400; border-radius: 1em; padding: .8em 1.2em 1em; border-left: .4em solid var(--or); box-shadow: 0 0 2.4em rgba(255,210,63,.3); animation: entree .5s .35s backwards; }
.an-titre { font-size: 1.5em; font-weight: 900; color: #7a5300; margin-bottom: .25em; }
.anecdote p { margin: 0; font-size: 2.2em; line-height: 1.35; font-weight: 600; }
.anecdote.long p { font-size: 1.65em; }
.source-tv { font-size: 1.2em; color: rgba(255,255,255,.75); font-style: italic; }
.expl-d { display: flex; flex-direction: column; min-height: 0; }
.cl-titre { font-size: 1.9em; font-weight: 900; margin-bottom: .5em; color: var(--or); }
.cl-titre small { font-size: .6em; color: rgba(255,255,255,.75); font-weight: 700; }
.cl-course { --lh: 4.15em; --rh: 3.6em; --fs: 1.7em; position: relative; }
.cl-course.petit { --lh: 5.9em; --rh: 5.2em; --fs: 2.2em; }
.cl-course.moyen { --lh: 4.9em; --rh: 4.3em; --fs: 1.95em; }
.cl-ligne { position: absolute; left: 0; right: 0; top: 0; height: var(--rh); transform: translateY(calc(var(--pos) * var(--lh))); transition: transform .9s cubic-bezier(.3,.9,.3,1), opacity .5s; display: flex; align-items: center; gap: .6em; }
.cl-ligne.hors { opacity: 0; }
.cl-piste { flex: 1; min-width: 0; height: 100%; }
.cl-barre { height: 100%; display: flex; align-items: center; gap: .6em; padding: 0 .9em; border-radius: .8em; background: linear-gradient(90deg, #5d34a8, #7c4ed1); transition: width .9s cubic-bezier(.3,.9,.3,1); font-size: var(--fs); font-weight: 800; min-width: 9.5em; box-shadow: 0 .1em 0 rgba(0,0,0,.25); overflow: hidden; }
.cl-ligne.r1 .cl-barre { background: linear-gradient(90deg, #f5b800, #ffd23f); color: #2b1055; }
.cl-ligne.r2 .cl-barre { background: linear-gradient(90deg, #aeb3cc, #e6e8f4); color: #2b1055; }
.cl-ligne.r3 .cl-barre { background: linear-gradient(90deg, #cc8442, #eaa966); color: #2b1055; }
.cl-rang { width: 1.4em; text-align: center; font-weight: 900; font-size: 1.1em; }
.cl-nom { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-score { font-variant-numeric: tabular-nums; font-weight: 900; }
.cl-mv { width: 9em; display: flex; align-items: center; gap: .5em; font-size: 1.45em; font-weight: 800; flex: 0 0 auto; }
.mv { display: inline-flex; gap: .15em; align-items: center; border-radius: .5em; padding: .05em .45em; animation: pop .4s .9s backwards; }
.mv.haut { background: #0f5e36; color: var(--bon-clair); } .mv.bas { background: #6b1626; color: #ffb3bb; }
.gain-pastille { background: var(--or); color: #2b1055; font-weight: 900; border-radius: 999px; padding: .02em .55em; font-size: .9em; animation: pop .45s .75s cubic-bezier(.2,1.5,.4,1) backwards; }
.cl-reste { margin-top: .5em; font-size: 1.4em; color: rgba(255,255,255,.8); }

/* ───── trophées ───── */
.tro-intro, .tro { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6em; width: 100%; }
.ti-coupe { font-size: 14em; line-height: 1; filter: drop-shadow(0 0 .3em rgba(255,210,63,.6)); animation: pop .7s cubic-bezier(.2,1.4,.4,1) backwards; }
.ti-titre { font-size: 5.4em; font-weight: 900; margin: 0; }
.ti-texte { font-size: 2.2em; margin: 0; max-width: 28em; }
.tro-kicker { font-size: 1.8em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.tro-mystere { width: 9em; height: 9em; border-radius: 50%; display: grid; place-items: center; font-size: 1.6em; background: radial-gradient(circle at 35% 30%, #7d49d6, #3a1480); border: .12em solid var(--or); box-shadow: 0 0 3em rgba(255,210,63,.4); animation: bat 1.1s ease-in-out infinite; }
.tro-mystere span { font-size: 6em; font-weight: 900; color: var(--or); line-height: 1; }
@keyframes bat { 50% { transform: scale(1.07); box-shadow: 0 0 5em rgba(255,210,63,.7); } }
.tro-phrase { font-size: 4.2em; font-weight: 800; margin: .1em 0 0; line-height: 1.15; max-width: 22em; }
.tro-phrase b { color: var(--or); font-weight: 900; }
.tro-desc { font-size: 1.9em; margin: 0; color: rgba(255,255,255,.88); max-width: 30em; }
.roulement { display: flex; gap: .5em; justify-content: center; margin-top: .6em; }
.roulement i { width: 1em; height: 1em; border-radius: 50%; background: var(--or); animation: saute 1s ease-in-out infinite; }
.roulement i:nth-child(2) { animation-delay: .1s; } .roulement i:nth-child(3) { animation-delay: .2s; } .roulement i:nth-child(4) { animation-delay: .3s; } .roulement i:nth-child(5) { animation-delay: .4s; }
.tro.reveal-t.solo { gap: .2em; }
.tro-emoji { font-size: 12em; line-height: 1.05; animation: pop .7s cubic-bezier(.2,1.5,.4,1) backwards; filter: drop-shadow(0 .1em .25em rgba(0,0,0,.4)); }
.tro-titre { font-size: 3em; font-weight: 900; color: var(--or); text-transform: uppercase; letter-spacing: .08em; margin: .25em 0 .1em; animation: fondu .4s .2s backwards; }
.tro-noms { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .1em .5em; animation: pop .55s .45s cubic-bezier(.2,1.3,.4,1) backwards; }
.tro-nom { font-size: 7em; font-weight: 900; line-height: 1.1; text-shadow: 0 .04em 0 rgba(0,0,0,.35), 0 0 .5em rgba(255,210,63,.35); }
.tro.nombreux .tro-nom { font-size: 4.6em; }
.tro-et { font-size: 3.2em; color: var(--or); font-weight: 900; }
.tro-detail { font-size: 2.6em; font-weight: 700; background: var(--verre); border: 1px solid var(--trait); border-radius: 999px; padding: .1em 1em; animation: entree .45s .8s backwards; }
.tro.reveal-t.solo .tro-desc { animation: fondu .5s 1.1s backwards; font-size: 1.7em; }
.tro.multi { flex-direction: row; gap: 3em; align-items: center; text-align: left; }
.tro.multi .tro-g { flex: 0 0 26%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .3em; }
.tro.multi .tro-emoji { font-size: 9em; }
.tro.multi .tro-titre { font-size: 2.6em; }
.tro-grille { flex: 1; display: grid; gap: .8em; grid-template-columns: repeat(2, 1fr); align-content: center; }
.tro.une-col .tro-grille { grid-template-columns: 1fr; gap: 1em; }
.tro.une-col .tc-noms b { font-size: 4em; } .tro.une-col .tc-detail { font-size: 2em; } .tro.une-col .tro-carte { padding: .6em 1.2em; }
.t3 .tro-grille { grid-template-columns: repeat(3, 1fr); } .t4 .tro-grille { grid-template-columns: repeat(4, 1fr); gap: .5em; }
.tro-carte { background: var(--verre); border: 1px solid var(--trait); border-left: .35em solid var(--or); border-radius: .9em; padding: .55em .9em; animation: pop .4s var(--d) cubic-bezier(.2,1.4,.4,1) backwards; display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.tc-noms { display: flex; flex-wrap: wrap; gap: 0 .6em; }
.tc-noms b { font-size: 3em; font-weight: 900; line-height: 1.15; }
.t2 .tc-noms b { font-size: 2.3em; } .t3 .tc-noms b { font-size: 1.8em; } .t4 .tc-noms b { font-size: 1.6em; }
.tc-detail { font-size: 1.5em; color: rgba(255,255,255,.88); }
.t3 .tc-detail { font-size: 1.25em; } .t4 .tc-detail { font-size: 1.1em; }
.tro-cat { align-self: flex-start; background: var(--cc); color: #fff; border-radius: 999px; font-weight: 800; font-size: 1.25em; padding: .05em .7em; text-shadow: 0 0 .3em rgba(0,0,0,.5); }

.tro.foule { flex-direction: row; gap: 3em; align-items: center; text-align: left; }
.tro.foule .tro-g { flex: 0 0 27%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .3em; }
.tro.foule .tro-emoji { font-size: 9em; } .tro.foule .tro-titre { font-size: 2.6em; } .tro.foule .tro-detail { font-size: 1.7em; margin-top: .4em; }
.foule-noms { flex: 1; display: flex; flex-wrap: wrap; gap: .45em .6em; align-content: center; justify-content: center; }
.foule-noms span { background: rgba(255,255,255,.14); border: 1px solid var(--trait); border-left: .25em solid var(--or); border-radius: .6em; padding: .1em .6em; font-weight: 800; animation: pop .4s var(--d) cubic-bezier(.2,1.4,.4,1) backwards; }
.f1 .foule-noms span { font-size: 3.2em; } .f2 .foule-noms span { font-size: 2.4em; } .f3 .foule-noms span { font-size: 1.8em; } .f4 .foule-noms span { font-size: 1.45em; }

/* ───── podium ───── */
.pod { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pod-legende { text-align: center; min-height: 11em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em; }
.pod-titre { font-size: 4.4em; font-weight: 900; margin: 0; animation: entree .45s backwards; }
.pod-titre.or { color: var(--or); text-shadow: 0 0 .5em rgba(255,210,63,.55); }
.pod-sous { font-size: 2.1em; margin: 0; font-weight: 600; }
.pod-scene { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-end; gap: 1.6em; }
.marche { width: 25em; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.m-nom { text-align: center; font-size: 3.2em; font-weight: 900; margin-bottom: .15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.marche.nouveau .m-nom { animation: pop .6s .5s cubic-bezier(.2,1.4,.4,1) backwards; }
.couronne { display: inline-block; font-size: .9em; margin-right: .2em; animation: saute 1.6s ease-in-out infinite; }
.m-bloc { height: calc(var(--h) * .78%); min-height: 8em; border-radius: 1em 1em 0 0; display: flex; flex-direction: column; align-items: center; padding-top: .5em; font-weight: 900; color: #2b1055; position: relative; box-shadow: inset 0 .4em 0 rgba(255,255,255,.35); transform-origin: bottom; }
.marche.nouveau .m-bloc { animation: monte .8s cubic-bezier(.2,.9,.3,1.1) backwards; }
@keyframes monte { from { transform: scaleY(0); } }
.m1 .m-bloc { background: linear-gradient(#ffe27a, #f5b800); } .m2 .m-bloc { background: linear-gradient(#f4f5fb, #aeb3cc); } .m3 .m-bloc { background: linear-gradient(#f1b987, #c27a3a); }
.m-med { font-size: 3.2em; line-height: 1; } .m-place { font-size: 5em; line-height: 1; }
.m-med + .m-place { display: none; }
.m-score { font-size: 2.4em; font-variant-numeric: tabular-nums; margin-top: auto; padding-bottom: .4em; } .m-score small { font-size: .55em; }
.marche.vide .m-bloc { background: rgba(255,255,255,.07); border: .15em dashed rgba(255,255,255,.3); box-shadow: none; justify-content: center; padding: 0; }
.marche.vide .m-place { font-size: 6em; color: rgba(255,255,255,.35); }

/* ───── bilan ───── */
.bilan { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5em; }
.bil-g, .bil-d { display: flex; flex-direction: column; min-height: 0; gap: .8em; }
.bil-titre { font-size: 2.6em; margin: 0; color: var(--or); font-weight: 900; }
.bil-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em .8em; align-content: start; }
.bil-liste li { display: flex; align-items: center; gap: .7em; background: rgba(255,255,255,.1); border-radius: .7em; padding: .2em .8em; min-width: 0; }
.bil-liste.xg { font-size: 2.5em; } .bil-liste.g { font-size: 1.9em; } .bil-liste.m { font-size: 1.55em; } .bil-liste.p { font-size: 1.25em; }
.bil-liste li.r1 { background: var(--or); color: #2b1055; } .bil-liste li.r2 { background: #e6e8f4; color: #2b1055; } .bil-liste li.r3 { background: #eaa966; color: #2b1055; }
.b-rang { width: 1.5em; text-align: center; font-weight: 900; }
.b-nom { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-bonnes { font-size: .75em; opacity: .85; font-variant-numeric: tabular-nums; }
.b-score { font-weight: 900; font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.stats { display: flex; flex-direction: column; gap: .7em; }
.stat { display: flex; gap: 1em; align-items: center; background: var(--verre); border: 1px solid var(--trait); border-radius: 1em; padding: .55em 1.1em; animation: entree .45s var(--d) backwards; }
.st-emoji { font-size: 3.4em; line-height: 1; }
.st-titre { font-size: 1.2em; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--or); }
.st-val { font-size: 2.2em; font-weight: 900; line-height: 1.1; }
.st-sous { font-size: 1.3em; color: rgba(255,255,255,.88); overflow-wrap: anywhere; }
.bil-actions { margin-top: auto; display: flex; align-items: center; gap: 1.5em; }
.merci { font-size: 1.8em; font-weight: 700; margin: 0; }

/* ───── transition ───── */
.ctv-trans { display: flex; align-items: center; justify-content: center; }
.trans-boite { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .5em; text-align: center; animation: fondu .25s backwards; }
.t-kicker { font-size: 3.4em; font-weight: 800; color: var(--or); animation: entree .4s backwards; }
.t-prog { display: flex; align-items: baseline; gap: .2em; animation: pop .5s .1s cubic-bezier(.2,1.4,.4,1) backwards; }
.t-prog b { font-size: 16em; line-height: 1; font-weight: 900; text-shadow: 0 .04em 0 rgba(0,0,0,.35); font-variant-numeric: tabular-nums; }
.t-prog span { font-size: 6em; font-weight: 800; color: rgba(255,255,255,.75); }
.t-legende { font-size: 1.9em; font-weight: 700; margin-top: -.4em; color: rgba(255,255,255,.85); }
.t-points { display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; max-width: 30em; margin-top: .8em; }
.t-points i { width: 1.1em; height: 1.1em; border-radius: 50%; background: rgba(255,255,255,.18); border: .12em solid rgba(255,255,255,.4); }
.t-points i.on { background: var(--or); border-color: var(--or); animation: pop .35s var(--d) cubic-bezier(.2,1.5,.4,1) backwards; }
.t-rep { font-size: 2.2em; font-weight: 700; } .t-rep b { color: var(--or); font-size: 1.2em; }
.ctv-trans.derniere .t-kicker { font-size: 3.6em; }
.t-gros { font-size: 7.5em; font-weight: 900; line-height: 1; max-width: 9em; text-shadow: 0 0 .5em rgba(255,210,63,.5); animation: montee .6s .3s ease-out backwards; }
@keyframes montee { from { opacity: 0; transform: scale(.7); letter-spacing: -.05em; } }
.ctv-trans.derniere .t-prog.fin { margin-top: .3em; } .ctv-trans.derniere .t-prog b { font-size: 4.5em; } .ctv-trans.derniere .t-prog span { font-size: 3em; }
.t-anneaux { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; z-index: -1; }
.t-anneaux i { position: absolute; width: 30em; height: 30em; margin: -15em 0 0 -15em; border-radius: 50%; border: .25em solid rgba(255,210,63,.55); animation: onde 1.8s ease-out infinite; }
.t-anneaux i:nth-child(2) { animation-delay: .6s; } .t-anneaux i:nth-child(3) { animation-delay: 1.2s; }
@keyframes onde { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.ctv-trans.derniere .ctv-fond::before { opacity: .55; }

/* ───── petits écrans (< 1200 px de large : 1 em reste proportionnel mais on évite le débordement) ───── */
@media (max-aspect-ratio: 4/3) { .ctv-aide { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .ctv *, .ctv *::before, .ctv *::after { animation: none !important; transition: none !important; }
}