/* Outil · Tirage (Draw) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : tg-
   En haut, centré : Tirage / Roue. Deux colonnes (.outil-colonnes) : à gauche le cadre (4:3, taille fixe) où les noms
   défilent ou la roue tourne, et une ligne d'état ; à droite le bouton, la liste, les réglages. Rien ne bouge. */
.tg .outil-fixe { align-items: stretch; }
.tg-haut { display: flex; justify-content: center; }
.tg-haut .seg { width: min(100%, 320px); }
@media (min-width: 960px) {
  .tg.outil-colonnes { grid-template-rows: auto minmax(0, 1fr); row-gap: 18px; }
  .tg-haut { grid-column: 1 / -1; margin-top: 4px; }
}

/* Le cadre */
.tg-cadre { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; container-type: size; cursor: pointer;
  background: rgba(242, 240, 235, .025); box-shadow: inset 0 0 0 1px var(--filet-doux);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.tg-scene { position: absolute; inset: 0; display: none; }
.tg[data-mode="tirage"] .tg-tirage, .tg[data-mode="roue"] .tg-roue { display: grid; }

/* Tirage : le nom qui défile, puis le résultat (un nom, une liste, des équipes) */
.tg-tirage { place-items: center; padding: 6cqh 6cqw; text-align: center; }
.tg-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 min(13cqh, 11cqw)/1.1 var(--display); letter-spacing: -.03em; color: var(--papier); }
.tg-nom.passe { animation: tg-passe .12s ease-out; }
@keyframes tg-passe { from { transform: translateY(-30%); opacity: .2; } }
.tg-nom.gagne { color: var(--orange); animation: tg-gagne .5s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes tg-gagne { from { transform: scale(.85); } }
.tg-nom.attente { color: var(--texte2); font: 500 13px/1.5 var(--mono); letter-spacing: .06em; white-space: normal; }
.tg-liste-res { margin: 0; padding: 0; list-style: none; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--lignes), auto); gap: 1.6cqh 6cqw;
  justify-content: center; text-align: left; font: 600 min(5.4cqh, 4.6cqw)/1.3 var(--corps); color: var(--papier); }
.tg-liste-res li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40cqw; }
.tg-liste-res span { display: inline-block; min-width: 2.2em; font: 500 .8em/1 var(--mono); color: var(--texte2); }
.tg-equipes { display: grid; grid-template-columns: repeat(var(--equipes), minmax(0, 1fr)); gap: 4cqw; width: 100%; text-align: left; }
.tg-equipes b { display: block; margin-bottom: 1.6cqh; font: 500 min(3.6cqh, 3cqw)/1 var(--mono); letter-spacing: .06em; color: var(--orange); }
.tg-equipes ul { margin: 0; padding: 0; list-style: none; font: 600 min(4.6cqh, 3.8cqw)/1.35 var(--corps); color: var(--papier); }
.tg-equipes li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-apparait { animation: tg-apparait .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes tg-apparait { from { opacity: 0; transform: translateY(8px); } }

/* Roue : un bloc carré qui tourne (la roue dedans) ; par-dessus, fixe, le repère. Sobre : un anneau d'une seule teinte,
   centre vide, filets à peine visibles, noms en mono ; le gagnant s'éclaire (sa part un peu, son nom en orange). */
.tg-roue { place-items: center; }
.tg-disque { position: relative; width: 84cqh; height: 84cqh; }
.tg-rotor, .tg-dessus { position: absolute; inset: 0; width: 100%; height: 100%; }
.tg-rotor { transform-origin: 50% 50%; transition: transform 4.2s cubic-bezier(.12, .64, .08, 1); will-change: transform; }
.tg-rotor svg { display: block; width: 100%; height: 100%; }
.tg-dessus { overflow: visible; pointer-events: none; }
.tg-fond { fill: rgba(242, 240, 235, .035); stroke: rgba(242, 240, 235, .12); stroke-width: .25; }
.tg-part { fill: transparent; transition: fill .6s var(--courbe); }
.tg-part.gagne { fill: rgba(242, 240, 235, .07); }
.tg-filets line { stroke: rgba(242, 240, 235, .1); stroke-width: .25; }
.tg-rotor text { fill: var(--texte2); font-family: var(--mono); font-weight: 500; letter-spacing: .08em; dominant-baseline: central; text-anchor: end; transition: fill .6s var(--courbe); }
.tg-rotor text.gagne { fill: var(--orange); }
.tg-repere { stroke: var(--orange); stroke-width: 1.1; stroke-linecap: round; }
/* À l'arrêt : la roue se floute et s'efface un peu, le nom du gagnant apparaît par-dessus */
.tg-disque { transition: filter .7s var(--courbe), opacity .7s var(--courbe); }
.tg-roue.fini .tg-disque { filter: blur(5px); opacity: .55; }
.tg-resultat-roue { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 6cqw; pointer-events: none; opacity: 0; transition: opacity .5s var(--courbe); }
.tg-roue.fini .tg-resultat-roue { opacity: 1; }
.tg-resultat-roue .tg-nom { animation: none; }
.tg-roue.fini .tg-resultat-roue .tg-nom { animation: tg-gagne .6s cubic-bezier(.2, .9, .3, 1.3); }
@media (prefers-reduced-motion: reduce) { .tg-rotor { transition-duration: .01s; } .tg-nom.passe, .tg-nom.gagne, .tg-apparait { animation: none; } }

/* Sous le cadre : l'état (une ligne fixe) */
.tg-etat { height: 1lh; margin: 0; }

/* À droite */
.tg .tg-lancer { align-self: stretch; justify-content: center; padding: 14px 34px; cursor: pointer; }
.tg .tg-lancer:hover { translate: none; }
.tg .tg-lancer:disabled { opacity: .3; cursor: default; }
.tg .tg-texte { height: calc(8 * 1.45em + 22px); resize: none; display: block; }
.tg-compte { margin: 6px 0 0; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); }
.tg-grise { opacity: .3; pointer-events: none; }
.tg-remettre { align-self: flex-start; cursor: pointer; }
.tg-remettre:hover { translate: none; }
.tg-remettre:disabled { opacity: .3; cursor: default; }