/* L'ARÈNE DES TRADERS IA (27/10/2026, refondue le 28/10/2026 : « gamifiée, dans le
   style de l'application »). L'écran du participant (`user_arene.html`), le classement
   (`arene/_classement.html`) et la page publique (`public_arene.html`) partagent ces
   règles, et elles seules. Couleurs : les jetons de la charte (`charte.css`) ; l'or,
   l'argent et le bronze des médailles sont des voiles, jamais des aplats, comme les
   teintes. Les mouvements se taisent sous `prefers-reduced-motion`. */

.ar { max-width: 860px; margin: 0 auto; display: grid; gap: 18px;
  grid-template-columns: minmax(0, 1fr); }
/* Dans l'espace, la page de l'Arène prend toute la largeur, comme les autres pages
   (fondateur, 04/11/2026) ; la page publique garde sa largeur de lecture. */
.ar--espace { max-width: none; }
.ar p { margin: 0; line-height: 1.6; color: var(--muted-foreground); }
.ar h2 { margin: 0; font-size: var(--text-lg); font-weight: 500;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── Les messages ── */
.ar-avis { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px;
  border-radius: var(--radius-lg, 14px); line-height: 1.5; border: 1px solid var(--border); }
.ar-avis svg { flex: none; margin-top: 3px; }
/* Les lots au-delà du podium (03/11/2026, `arene/_lots.html`). */
.ar-lots-suite { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.ar-avis.ok { border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.06); color: #BBF7D0; }
.ar-avis.ko { border-color: rgba(248,113,113,.40); background: rgba(248,113,113,.06); color: #FECACA; }

/* ── La scène : l'Arène qui attend, ou qui court ── */
.ar-scene { position: relative; overflow: hidden; border-radius: var(--radius-xl);
  border: 1px solid rgba(180,168,255,.28); padding: 26px 28px 24px; display: grid; gap: 14px;
  background:
    radial-gradient(90% 120% at 50% 120%, rgba(139,127,224,.30), transparent 60%),
    radial-gradient(60% 80% at 100% 0%, rgba(180,168,255,.14), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(180,168,255,.035) 46px 47px),
    var(--card);
  box-shadow: 0 0 0 1px var(--accent-ring), 0 20px 60px -30px var(--accent-glow-strong); }
.ar-scene::after { content: ""; position: absolute; inset: auto -20% -60% -20%; height: 70%;
  background: radial-gradient(closest-side, var(--accent-glow), transparent);
  pointer-events: none; }
.ar-scene > * { position: relative; z-index: 1; }
/* Les blocs relus en direct (TVNI-580, `rafraichir.js`) : une enveloppe sans boîte, la
   mise en page reste celle de leurs enfants. */
.ar-vivant { display: contents; }
.ar-scene > .ar-vivant > * { position: relative; z-index: 1; }
.ar-scene-tete { display: flex; justify-content: space-between; gap: 10px; align-items: center;
  flex-wrap: wrap; }
.ar-sur { display: inline-flex; gap: 8px; align-items: center; color: var(--accent);
  font-size: var(--text-xs, .75rem); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.ar-titre { margin: 0; font-size: clamp(2rem, 6vw, 3.1rem); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.05;
  background: linear-gradient(180deg, #FFFFFF 10%, var(--accent-hi) 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ar-sous { font-size: var(--text-base, 1rem); }
.ar-direct { width: 8px; height: 8px; border-radius: 50%; background: var(--error);
  box-shadow: 0 0 0 0 rgba(248,113,113,.6); animation: ar-pouls 1.6s infinite; }
@keyframes ar-pouls { 70% { box-shadow: 0 0 0 8px rgba(248,113,113,0); } 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); } }

.ar-badge { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px;
  border-radius: var(--radius-pill); border: 1px solid var(--border); font-size: var(--text-xs, .75rem);
  background: rgba(255,255,255,.03); }
.ar-badge--ok { border-color: rgba(74,222,128,.35); color: #BBF7D0; background: rgba(74,222,128,.08); }
.ar-badge--chaud { border-color: rgba(251,191,36,.40); color: var(--warning-text); background: rgba(251,191,36,.08); }
.ar-sim { font-size: var(--text-xs, .75rem); color: var(--muted-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px 9px;
  font-weight: 400; letter-spacing: 0; text-transform: none; }

/* ── Le compte à rebours ── */
.ar-rebours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 460px; }
.ar-rebours > div { display: grid; justify-items: center; gap: 2px; padding: 12px 6px;
  border-radius: var(--radius-lg, 14px); border: 1px solid rgba(180,168,255,.22);
  background: rgba(10,11,16,.45); }
.ar-rebours span { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--foreground); }
.ar-rebours small { font-size: var(--text-xs, .75rem); color: var(--muted-foreground); }
.ar-rebours--petit { display: flex; gap: 4px; align-items: baseline; max-width: none;
  color: var(--muted-foreground); font-size: var(--text-sm); }
.ar-rebours--petit span { font-size: var(--text-sm); font-weight: 600; color: var(--foreground); margin-left: 4px; }
.ar-rebours-mot { margin-right: 4px; }

/* ── La carte du départ (04/11/2026, `arene/_depart.html`) : UN billet doré, le temps
   et les places de part et d'autre d'un pointillé, le geste dans son talon. ── */
.ar-billet { display: grid; border-radius: 20px; overflow: hidden; border: 1px solid rgba(252,211,77,.38);
  background: radial-gradient(120% 160% at 0% 0%, rgba(252,211,77,.10), transparent 55%),
              radial-gradient(120% 160% at 100% 100%, rgba(139,127,224,.14), transparent 60%), rgba(10,11,16,.55);
  box-shadow: 0 22px 50px -30px rgba(245,158,11,.55); }
.ar-billet-corps { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.ar-billet-part { display: grid; gap: 12px; align-content: start; padding: 20px 22px; }
.ar-billet-part--places { border-left: 2px dashed rgba(252,211,77,.28); }
.ar-depart-mot { display: inline-flex; gap: 6px; align-items: center; font-size: var(--text-xs, .75rem); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: #FCD34D; }
/* Le temps : de grands chiffres dorés, sans cases. */
.ar-rebours--billet { display: flex; gap: 6px 18px; flex-wrap: wrap; max-width: none; }
.ar-rebours--billet > div { display: grid; justify-items: start; gap: 0; padding: 0; border: 0; background: none; border-radius: 0; }
.ar-rebours--billet span { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 700; line-height: 1;
  background: linear-gradient(180deg, #FFFFFF 25%, #FDE68A 130%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ar-rebours--billet small { margin-top: 4px; font-size: var(--text-xs, .75rem); color: var(--muted-foreground); }
.ar-depart-date { display: inline-flex; gap: 6px; align-items: center; font-size: var(--text-sm); color: var(--muted-foreground); }
/* Les places : combien, et une pastille par place. */
.ar-depart-libres { margin: 0; font-size: var(--text-base, 1rem); color: var(--muted-foreground); }
.ar-depart-libres b { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 700; line-height: 1; color: var(--foreground); margin-right: 6px; }
/* Chaque place par son trader IA (06/11/2026) : sa photo, son nom dessous. */
.ar-places-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 8px; }
.ar-places-mini li { width: 64px; display: grid; justify-items: center; align-content: start; gap: 5px; flex: none; }
.ar-place-rond { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  overflow: hidden; font-size: 18px; line-height: 1; }
.ar-place-rond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-places-mini li.libre .ar-place-rond { border: 1.5px dashed rgba(252,211,77,.45); background: rgba(252,211,77,.05);
  animation: ar-libre 2.6s ease-in-out infinite; }
.ar-places-mini li.libre:nth-child(2n) .ar-place-rond { animation-delay: .4s; } .ar-places-mini li.libre:nth-child(3n) .ar-place-rond { animation-delay: .8s; }
@keyframes ar-libre { 50% { background: rgba(252,211,77,.16); } }
.ar-places-mini li.pris .ar-place-rond { border: 1px solid rgba(255,255,255,.12); font-size: 11px; font-weight: 700; }
.ar-places-mini li.pris .ar-place-rond:not(:has(img)) { font-size: 18px; }
.ar-places-mini li.moi .ar-place-rond { box-shadow: 0 0 0 2px #FCD34D; }
/* Le nom tient sur deux lignes, puis « … » : un nom de trader se lit en entier le plus souvent. */
.ar-place-nom { max-width: 100%; font-size: 11px; line-height: 1.25; color: var(--muted-foreground);
  text-align: center; overflow-wrap: anywhere; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ar-places-mini li.moi .ar-place-nom { color: #FCD34D; }
.ar-depart-envie { font-size: var(--text-sm); color: var(--muted-foreground); }
/* Le talon : la promesse à gauche, le geste à droite. */
.ar-billet-talon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px;
  padding: 16px 22px; border-top: 2px dashed rgba(252,211,77,.28); background: rgba(252,211,77,.04); }
.ar-billet-talon-texte { display: block; font-size: var(--text-sm); line-height: 1.5; color: var(--muted-foreground); }
.ar-billet-talon-texte svg { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.ar-billet-talon-texte a { color: var(--accent); }
.ar-cta--grand { font-size: var(--text-base, 1rem); padding: 13px 26px; gap: 8px; justify-self: auto; }
@media (max-width: 640px) {
  .ar-billet-corps { grid-template-columns: minmax(0, 1fr); }
  .ar-billet-part { padding: 18px; }
  .ar-billet-part--places { border-left: 0; border-top: 2px dashed rgba(252,211,77,.28); }
  /* Au téléphone, cinq places par ligne : les dix tiennent sur deux. */
  .ar-places-mini { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 4px; }
  .ar-places-mini li { width: auto; min-width: 0; }
  .ar-place-rond { width: 38px; height: 38px; }
  .ar-billet-talon { padding: 16px 18px; }
  .ar-billet-talon .ar-cta--grand { width: 100%; justify-content: center; order: -1; }
  .ar-billet-talon-texte { width: 100%; text-align: center; font-size: var(--text-xs, .75rem); }
  .ar-rebours--billet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .ar-rebours--billet > div { justify-items: center; padding: 10px 2px; border-radius: 12px;
    border: 1px solid rgba(252,211,77,.18); background: rgba(10,11,16,.45); }
}
@media (prefers-reduced-motion: reduce) { .ar-places-mini li.libre .ar-place-rond { animation: none; } }

/* EN DIRECT, MAINTENANT (09/11/2026, TVNI-528, `arene/_en_direct.html`) : la carte qui
   tourne du kit (`jeu-carte--lueur`), le point rouge qui bat, un clic vers le direct. */
.ar-en-direct { display: grid; gap: 10px; }
.ar-en-direct-carte { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  padding: 14px 18px; }
.ar-en-direct-chip { gap: 6px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ar-en-direct-texte { display: grid; gap: 2px; min-width: 0; }
.ar-en-direct-texte b { font-size: var(--text-lg, 1.1rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-en-direct-texte small { color: var(--muted-foreground); font-size: var(--text-xs, .75rem); }
@media (max-width: 720px) {
  .ar-en-direct-carte { grid-template-columns: auto minmax(0, 1fr); }
  .ar-en-direct-carte .ar-rebours { grid-column: 1 / -1; }
  .ar-en-direct-texte b { white-space: normal; }
  .ar-en-direct-bouton { grid-column: 1 / -1; justify-content: center; }
}

/* L'hôte d'une Arène (03/11/2026) : le logo doré des sponsors, en plus petit
   (`arene/_hote.html`, une écriture pour la page publique, l'espace et le direct). */
.ar-hote { display: flex; gap: 10px; align-items: center; margin: 0; font-size: var(--text-sm); }
.ar-hote .ar-sponsor-logo { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.ar-hote-lien { display: block; color: var(--muted-foreground); font-size: var(--text-xs); }
.ar-hote a { color: inherit; }

/* La pastille ronde d'un participant (le classement, la tribune) : la photo de son
   trader, sinon son emoji sur sa teinte (09/11/2026). */
.ar-pastille { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 600; border: 1px solid rgba(255,255,255,.10); overflow: hidden; }
.ar-pastille img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ar-cta { justify-self: start; padding-left: 20px; padding-right: 20px;
  box-shadow: 0 10px 30px -10px var(--accent-glow-strong); }

/* ── Les cartes ── */
.ar-carte { background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 22px 24px; display: grid; gap: 14px; }
.ar-carte--forte { border-color: rgba(180,168,255,.35); box-shadow: 0 0 0 1px var(--accent-ring); }
.ar-note { display: flex; gap: 8px; align-items: flex-start; font-size: var(--text-sm); }
.ar-note svg { flex: none; margin-top: 4px; color: var(--accent); }
.ar-note a { color: var(--accent); font-weight: 500; }
.ar-bonus { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px;
  border-radius: var(--radius-lg, 14px); background: rgba(251,191,36,.06);
  border: 1px solid rgba(251,191,36,.25); }
.ar-bonus svg { flex: none; margin-top: 4px; color: var(--warning-text); }

/* ── Les sponsors (03/11/2026, `arene/_sponsors.html`) : la teinte OR de l'Arène.
   Fondateur : « sexy, esthétique, magnifique ». Un titre encadré de deux filets dorés,
   puis une carte par sponsor, toutes pareilles : logo dans un écrin lumineux, nom,
   slogan, et une flèche qui s'avance au survol. Un seul sponsor : sa carte s'élargit et
   se centre (`:only-child`). Autant qu'il y en a, elles passent à la ligne. ── */
.ar-sponsors { display: grid; gap: 12px; margin-top: 4px; }
.ar-sponsors-titre { display: flex; align-items: center; gap: 12px; justify-content: center;
  font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--jeu-or, #FCD34D); }
.ar-sponsors-titre::before, .ar-sponsors-titre::after { content: ""; flex: 1 1 40px; max-width: 120px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(252,211,77,.55)); }
.ar-sponsors-titre::after { background: linear-gradient(270deg, transparent, rgba(252,211,77,.55)); }
.ar-sponsors-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ar-sponsors-liste > li:only-child { max-width: 520px; width: 100%; justify-self: center; }
.ar-sponsor { position: relative; display: flex; gap: 16px; align-items: center; padding: 16px 18px;
  border-radius: 18px; color: inherit; text-decoration: none; overflow: hidden;
  border: 1px solid rgba(252,211,77,.28);
  background: radial-gradient(120% 160% at 0% 0%, rgba(252,211,77,.12), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  box-shadow: 0 10px 30px -18px rgba(245,158,11,.55);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.ar-sponsor::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%);
  transform: translateX(-100%); transition: transform .6s ease; }
.ar-sponsor:hover { transform: translateY(-2px); border-color: rgba(252,211,77,.55);
  box-shadow: 0 16px 36px -16px rgba(245,158,11,.7); }
.ar-sponsor:hover::after { transform: translateX(100%); }
.ar-sponsor-logo { flex: none; display: inline-grid; place-items: center; width: 56px; height: 56px;
  border-radius: 16px; overflow: hidden; font-size: var(--text-sm); font-weight: 600; color: #2B2010;
  background: linear-gradient(140deg, #FDE68A, #F59E0B);
  box-shadow: 0 0 0 1px rgba(252,211,77,.35), 0 8px 22px -6px rgba(245,158,11,.55); }
.ar-sponsor-logo img { width: 100%; height: 100%; object-fit: cover; }
.ar-sponsor-texte { display: grid; gap: 3px; min-width: 0; flex: 1; }
.ar-sponsor-texte b { font-weight: 600; font-size: var(--text-base); letter-spacing: -0.01em; }
.ar-sponsor-texte small { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.4; }
.ar-sponsor-fleche { flex: none; color: var(--jeu-or, #FCD34D); opacity: .7; transition: transform .18s ease, opacity .18s ease; }
.ar-sponsor:hover .ar-sponsor-fleche { transform: translateX(4px); opacity: 1; }
.ar-sponsor-mention { display: block; margin-top: 6px; font-size: var(--text-xs); color: var(--muted-foreground); text-align: center; }
@media (prefers-reduced-motion: reduce) { .ar-sponsor, .ar-sponsor::after, .ar-sponsor-fleche { transition: none; } }
/* Compacts (le pied du direct, 09/11/2026) : une ligne, le logo et le nom. */
.ar-sponsors--compact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
.ar-sponsors--compact .ar-sponsors-titre::before, .ar-sponsors--compact .ar-sponsors-titre::after { display: none; }
.ar-sponsors--compact .ar-sponsors-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-sponsors--compact .ar-sponsors-liste > li:only-child { max-width: none; width: auto; }
.ar-sponsors--compact .ar-sponsor { padding: 6px 12px 6px 6px; gap: 8px; border-radius: var(--radius-pill); }
.ar-sponsors--compact .ar-sponsor::after, .ar-sponsors--compact .ar-sponsor-fleche,
.ar-sponsors--compact .ar-sponsor-texte small, .ar-sponsors--compact .ar-sponsor-mention { display: none; }
.ar-sponsors--compact .ar-sponsor-logo { width: 28px; height: 28px; border-radius: 50%; font-size: var(--text-2xs, .65rem); }
.ar-sponsors--compact .ar-sponsor-texte b { font-size: var(--text-sm); }

/* ── Les médailles : or, argent, bronze, en voiles ── */
.ar-medaille { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 50%; font-weight: 700; font-size: var(--text-sm);
  background: rgba(180,168,255,.12); color: var(--accent); border: 1px solid rgba(180,168,255,.25); }
.ar-medaille--1 { background: rgba(251,191,36,.18); color: #FDE68A; border-color: rgba(251,191,36,.55);
  box-shadow: 0 0 18px rgba(251,191,36,.25); }
.ar-medaille--2 { background: rgba(203,213,225,.14); color: #E2E8F0; border-color: rgba(203,213,225,.45); }
.ar-medaille--3 { background: rgba(217,140,90,.16); color: #F3C19C; border-color: rgba(217,140,90,.50); }

/* ── Le podium des lots ── */
.ar-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 10px; align-items: end; }
.ar-marche { display: grid; justify-items: center; gap: 6px; text-align: center;
  border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 6px 6px; padding: 16px 10px;
  border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,.04), transparent); }
.ar-marche b { font-size: var(--text-xl, 1.25rem); font-weight: 600; color: var(--foreground); }
.ar-marche small { color: var(--muted-foreground); font-size: var(--text-xs, .75rem); }
.ar-marche--1 { min-height: 170px; align-content: center; border-color: rgba(251,191,36,.40);
  background: linear-gradient(180deg, rgba(251,191,36,.12), rgba(139,127,224,.06)); }
.ar-marche--1 b { font-size: var(--text-2xl, 1.6rem); }
.ar-marche--2 { min-height: 140px; align-content: center; }
.ar-marche--3 { min-height: 120px; align-content: center; }

/* ── Entrer dans l'Arène : trois pas ── */
.ar-pas { display: grid; gap: 18px; }
.ar-pas fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; min-width: 0; }
.ar-pas legend { padding: 0; margin-bottom: 4px; font-weight: 500; display: flex; gap: 10px; align-items: center; }
.ar-numero { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(180,168,255,.14); color: var(--accent); font-size: var(--text-sm); font-weight: 600;
  border: 1px solid rgba(180,168,255,.30); }
.ar-aide { font-size: var(--text-sm); }
.ar-champions { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ar-champion { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px;
  align-items: center; padding: 14px; border-radius: var(--radius-lg, 14px); cursor: pointer;
  border: 1px solid var(--border); background: rgba(255,255,255,.02); color: inherit; text-decoration: none;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.ar-champion:hover { border-color: rgba(180,168,255,.40); transform: translateY(-1px); }
.ar-champion input { position: absolute; opacity: 0; pointer-events: none; }
.ar-champion b { display: block; font-weight: 500; }
.ar-champion small { display: block; color: var(--muted-foreground); font-size: var(--text-xs, .75rem); margin-top: 2px; }
.ar-champion-avatar { display: grid; place-items: center; width: 42px; height: 42px; }
.ar-champion-avatar .trd-avatar { width: 42px; height: 42px; }
.ar-champion--style .ar-champion-avatar { border-radius: var(--radius-md, 10px);
  background: rgba(180,168,255,.10); color: var(--accent); }
.ar-champion-coche { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border); color: transparent; }
.ar-champion:has(input:checked) { border-color: var(--primary); background: rgba(139,127,224,.10);
  box-shadow: 0 0 0 1px var(--primary), 0 10px 30px -18px var(--accent-glow-strong); }
.ar-champion:has(input:checked) .ar-champion-coche { background: var(--primary); border-color: var(--primary);
  color: var(--on-primary); }
.ar-champion:has(input:focus-visible) { outline: 2px solid var(--ring, var(--accent)); outline-offset: 2px; }
.ar-champion-fleche { color: var(--accent); }

.ar-case { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; cursor: pointer; }
.ar-case input { margin-top: 4px; accent-color: var(--primary); }
/* Se retirer, en vue (09/11/2026) : une ligne sous la préparation, jamais repliée. */
.ar-retrait { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  justify-content: space-between; border-top: 1px solid var(--border); padding-top: 14px;
  font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.5; }
.ar-retrait span { flex: 1 1 260px; }

/* ── La préparation ── */
.ar-prepa-tete { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--muted-foreground); }
.ar-prepa-tete b { color: var(--foreground); }
.ar-jauge { height: 6px; border-radius: 99px; background: var(--muted); overflow: hidden; }
.ar-jauge i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .4s; }
.ar-prepa { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ar-prepa li { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: var(--radius-lg, 14px); border: 1px solid var(--border); }
.ar-prepa li.fait { color: var(--muted-foreground); }
.ar-coche { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border); font-size: var(--text-xs, .75rem); }
.ar-prepa li.fait .ar-coche { background: rgba(74,222,128,.15); border-color: rgba(74,222,128,.45); color: var(--success); }

/* ── Les règles du combat ── */
.ar-regles { margin: 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ar-regles li { display: grid; gap: 4px; padding: 14px; border-radius: var(--radius-lg, 14px);
  border: 1px solid var(--border); background: rgba(255,255,255,.02); }
.ar-regles svg { color: var(--accent); }
.ar-regles b { font-weight: 600; }
.ar-regles small { color: var(--muted-foreground); font-size: var(--text-xs, .75rem); }

/* ── Mon rang, en direct ── */
.ar-mon-rang { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: var(--radius-lg, 14px); border: 1px solid rgba(180,168,255,.30);
  background: rgba(10,11,16,.45); }
.ar-mon-rang .ar-medaille { width: 44px; height: 44px; font-size: var(--text-lg); }
.ar-mon-rang b { display: block; }
.ar-mon-rang span { color: var(--muted-foreground); font-size: var(--text-sm); }

/* ── Le classement ── */
.ar-table { width: 100%; border-collapse: collapse; }
.ar-table th { text-align: left; font-weight: 500; font-size: var(--text-xs, .75rem);
  color: var(--muted-foreground); padding: 0 8px 8px; }
.ar-table th.n { text-align: right; }
.ar-table td { padding: 10px 8px; border-top: 1px solid var(--border); vertical-align: middle; }
.ar-table td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-table tr.moi td { background: rgba(139,127,224,.12); }
.ar-table tr.moi td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.ar-table .rang { width: 3em; font-weight: 600; }
.ar-qui { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ar-qui .ar-pastille { width: 30px; height: 30px; font-size: var(--text-xs, .75rem); flex: none; }
.ar-plus { color: var(--success); } .ar-moins { color: var(--error); }

/* ── Mes trophées ── */
.ar-trophees { margin: 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ar-trophees li { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 16px 10px;
  border-radius: var(--radius-lg, 14px); border: 1px solid var(--border); }
.ar-trophees li.podium { border-color: rgba(251,191,36,.35);
  background: linear-gradient(180deg, rgba(251,191,36,.08), transparent); }
.ar-trophees small { color: var(--muted-foreground); font-size: var(--text-xs, .75rem); }
.ar-montant { font-variant-numeric: tabular-nums; }

.ar-risque { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.6;
  border-left: 2px solid var(--warning); padding-left: 12px; }

/* ── La page publique (et l'ancien habillage, gardé pour elle) ── */
.ar-hero { position: relative; overflow: hidden; border-radius: var(--radius-xl);
  border: 1px solid rgba(167,139,250,.35); padding: 26px 26px 22px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(139,127,224,.22), transparent 55%), var(--card); }
.ar-hero h1 { margin: 8px 0 6px; font-size: var(--text-2xl, 1.6rem); font-weight: 600; }
.ar-faits { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.ar-fait { background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px); padding: 12px 14px; display: grid; gap: 2px; }
.ar-fait span { font-size: var(--text-xs, .75rem); color: var(--muted-foreground); }
.ar-fait b { font-weight: 500; }
.ar-geste { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.ar-cadre { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.ar-cadre li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.ar-cadre li svg { flex: none; margin-top: 3px; color: var(--success); }
.ar-lots { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.ar-lot { border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); padding: 14px;
  display: grid; gap: 4px; text-align: center; }
.ar-lot b { font-size: var(--text-lg); font-weight: 600; }
.ar-lot:first-child { border-color: rgba(167,139,250,.45); background: rgba(139,127,224,.08); }
.ar-lot span { color: var(--muted-foreground); font-size: var(--text-sm); }
.ar-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.ar-liste li { border: 1px solid var(--border); border-radius: 99px; padding: 2px 10px; font-size: var(--text-sm); }

/* ── La page publique ── */
.ar-pastille.teinte-0 { background: rgba(255,255,255,.06); color: var(--muted-foreground); }
.ar-etapes-pub { margin: 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ar-etapes-pub li { display: grid; gap: 6px; align-content: start; padding: 16px;
  border-radius: var(--radius-lg, 14px); border: 1px solid var(--border); background: rgba(255,255,255,.02); }
.ar-etapes-pub b { font-weight: 500; }
.ar-etapes-pub small { color: var(--muted-foreground); font-size: var(--text-sm); line-height: 1.5; }
.ar-archive { display: grid; justify-items: center; gap: 4px; color: inherit; text-decoration: none; }
.ar-trophees li:has(.ar-archive):hover { border-color: rgba(180,168,255,.40); }
.ar-scene--fin { justify-items: center; text-align: center; }
.ar-titre--petit { font-size: clamp(1.4rem, 4vw, 2rem); }
.ar-scene--fin .ar-cta { justify-self: center; }

/* ── Mon trader de l'Arène : le régler, lui copier un autre trader ── */
.ar-mon-trader { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; }
.ar-mon-trader h2 { font-size: var(--text-lg, 1.15rem); margin: 2px 0 6px; }
/* 04/11/2026 : son état en pastilles, ses gestes à droite, la copie repliée. */
.ar-mon-trader-etat { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-mon-trader-gestes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ar-copier-repli summary { cursor: pointer; font-size: var(--text-sm); color: var(--muted-foreground); }
.ar-copier-repli[open] summary { margin-bottom: 10px; }
@media (max-width: 640px) {
  .ar-mon-trader { grid-template-columns: 52px minmax(0, 1fr); }
  .ar-mon-trader > .ar-champion-avatar { align-self: start; }
  .ar-mon-trader-gestes { grid-column: 1 / -1; justify-content: flex-start; }
}
.ar-mon-trader small { color: var(--muted-foreground); font-size: var(--text-sm); }
.ar-copier { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.ar-copier label { font-size: var(--text-sm); color: var(--muted-foreground); }
.ar-copier select { flex: 1 1 180px; min-width: 0; width: auto; }

/* ── Le téléphone ── */
@media (max-width: 640px) {
  .ar-scene { padding: 20px 16px 18px; }
  .ar-carte, .ar-hero { padding: 18px 16px; }
  .ar-rebours { gap: 6px; }
  .ar-pastille { width: 38px; height: 38px; }
  .ar-podium { gap: 6px; }
  .ar-marche { padding: 12px 6px; }
  .ar-marche--1 { min-height: 150px; } .ar-marche--2 { min-height: 125px; } .ar-marche--3 { min-height: 108px; }
  .ar-regles { grid-template-columns: 1fr 1fr; }
  .ar-etapes-pub { grid-template-columns: 1fr; }
  .ar-mon-rang { grid-template-columns: auto minmax(0,1fr); }
  .ar-mon-rang .btn { grid-column: 1 / -1; justify-self: start; }
  .ar-cta { justify-self: stretch; justify-content: center; }
  .ar-faits { grid-template-columns: 1fr 1fr; }
  .ar-cadre, .ar-lots { grid-template-columns: 1fr; }
  .ar-mon-trader { grid-template-columns: 52px minmax(0,1fr); }
  .ar-mon-trader .btn, .ar-mon-trader-gestes { grid-column: 1 / -1; justify-self: start; }
  .ar-copier .btn { flex: 1 1 100%; justify-content: center; }
  .ar-table .col-trades { display: none; }
  .ar-table td.n .ar-sim { display: block; margin-top: 2px; border: 0; padding: 0; }
  .ar-table td, .ar-table th { padding-left: 4px; padding-right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-direct { animation: none; }
  .ar-champion, .ar-jauge i { transition: none; }
}

/* ── Le palmarès du trader de l'Arène (29/10/2026, `arene/palmares.py`) ── */
.pal { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; padding: 14px 16px;
  border-radius: 16px; border: 1px solid rgba(252,211,77,.28);
  background: radial-gradient(120% 140% at 0% 0%, rgba(252,211,77,.12), transparent 60%), rgba(255,255,255,.02); }
.pal-texte { display: grid; gap: 2px; flex: 1 1 200px; min-width: 0; }
.pal-texte b { font-size: var(--text-base); }
.pal-texte span { font-size: var(--text-sm); color: var(--muted-foreground); }
.pal-trophees { display: flex; flex-wrap: wrap; gap: 6px; }
.pal-trophee { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; color: var(--foreground); background: rgba(255,255,255,.06);
  border: 1px solid var(--border); }
.pal-trophee--victoire { color: #2B2010; background: linear-gradient(140deg, #FDE68A, #FCD34D 50%, #F59E0B); border-color: transparent; }
.pal-trophee--podium { color: #1F2330; background: linear-gradient(140deg, #F1F5F9, #CBD5E1); border-color: transparent; }

/* ── Le panthéon public ── */
.pan { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pan-ligne { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border); }
.pan-ligne--1 { border-color: rgba(252,211,77,.45); background: linear-gradient(90deg, rgba(252,211,77,.12), transparent 60%); }
.pan-ligne--2 { border-color: rgba(203,213,225,.35); }
.pan-ligne--3 { border-color: rgba(253,186,116,.35); }
.pan-place { width: 26px; text-align: center; font-weight: 700; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.pan-ligne--1 .pan-place { color: #FCD34D; }
.pan-avatar { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  overflow: hidden; font-size: calc(20px * var(--echelle-texte)); }
.pan-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pan-qui { display: grid; min-width: 0; flex: 1; }
.pan-qui b { font-size: var(--text-base); overflow-wrap: anywhere; }
.pan-qui small { font-size: var(--text-xs); color: var(--muted-foreground); }
.pan-trophees { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pan-t { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; background: rgba(255,255,255,.06); color: var(--muted-foreground); }
.pan-t--or { color: #2B2010; background: linear-gradient(140deg, #FDE68A, #FCD34D); }
.pan-t--argent { color: #1F2330; background: linear-gradient(140deg, #F1F5F9, #CBD5E1); }
.pan-legende { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--text-xs); color: var(--muted-foreground); }

/* ── LE TRADER DE L'ARÈNE, EN GRAND (TVNI-536, 10/11/2026) ──
   Fondateur : « qu'il soit dans la page de l'Arène, avec le même affichage que Mes
   traders, pensé pour un seul trader : que ce soit un plaisir de le voir ». Une carte à
   SA couleur (`--tr-teinte`, posée par `etat-trader.css`), liserée d'or comme l'Arène ;
   son portrait en grand avec le trophée ; sa journée en frise ; quatre chiffres ; ses
   gestes. Le badge, la frise et les positions sont ceux de « Mes traders »
   (`etat-trader.css`, `partials/trader_etat.html`). La carte entière ouvre son journal. */
.ar-moi { position: relative; display: grid; gap: 18px; padding: 22px 24px;
  border-radius: var(--radius-xl, 18px);
  border: 1px solid color-mix(in srgb, var(--tr-teinte, #FCD34D) 34%, rgba(252,211,77,.28));
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--tr-teinte, var(--accent)) 16%, transparent), transparent 55%),
    radial-gradient(90% 120% at 100% 0%, rgba(252,211,77,.10), transparent 60%),
    var(--card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px -24px color-mix(in srgb, var(--tr-teinte, var(--accent)) 60%, transparent);
  transition: border-color .18s ease, box-shadow .18s ease; }
.ar-moi:hover { border-color: color-mix(in srgb, var(--tr-teinte, #FCD34D) 55%, rgba(252,211,77,.4)); }
.ar-moi > *:not(.carte-lien) { position: relative; }
.ar-moi > .carte-lien { position: static; }

.ar-moi-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.ar-moi-portrait { position: relative; display: inline-grid; place-items: center; }
.ar-moi-portrait .trd-avatar { width: 78px; height: 78px; border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tr-teinte, var(--accent)) 75%, transparent),
    0 0 26px -4px color-mix(in srgb, var(--tr-teinte, var(--accent)) 65%, transparent); }
.ar-moi-portrait .trd-emoji { font-size: 38px; }
.ar-moi-medaille { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: #2B2010; background: linear-gradient(140deg, #FDE68A, #F59E0B);
  box-shadow: 0 0 0 3px var(--card), 0 4px 12px -2px rgba(245,158,11,.6); }
.ar-moi-qui { display: grid; gap: 4px; min-width: 0; }
.ar-moi-qui .ar-sur { color: #FCD34D; }
.ar-moi-qui h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-moi-puces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.ar-moi-puces .badge { font-size: var(--text-2xs); }
.ar-moi-puces .sdc-badge { font-size: var(--text-sm); padding: 4px 12px; }
.ar-moi-gestes { display: flex; align-items: center; gap: 8px; align-self: start; }

/* Sa journée : la règle des heures au-dessus, la piste plus haute que sur une ligne. */
.ar-moi-journee { display: grid; gap: 6px; padding: 12px 14px 14px; border-radius: 14px;
  background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.06); }
.ar-moi-axe { position: relative; display: block; height: 16px; }
.ar-moi-axe > span { position: absolute; transform: translateX(-50%); font-family: var(--font-mono);
  font-size: var(--text-2xs); color: var(--disabled-foreground); }
/* La première heure s'aligne sur le bord gauche : centrée, elle sortirait de la carte. */
.ar-moi-axe > span:first-child { transform: none; }
.ar-moi-journee .jr-piste { display: block; height: 34px; border-radius: 8px; overflow: hidden; }
.ar-moi-journee .jr-bande { border-radius: 8px; }
.ar-moi--en-seance .jr-bande { background: color-mix(in srgb, var(--jr-c) 48%, transparent);
  border-color: var(--jr-c); box-shadow: 0 0 12px color-mix(in srgb, var(--jr-c) 45%, transparent); }

/* Quatre chiffres, en tuiles. */
.ar-moi-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ar-moi-chiffres > div { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); min-width: 0; }
.ar-moi-chiffres dt { font-size: var(--text-xs); color: var(--muted-foreground); }
.ar-moi-chiffres dd { margin: 0; display: grid; gap: 2px; min-width: 0; }
.ar-moi-chiffres b { font-size: var(--text-lg, 1.15rem); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; }
.ar-moi-chiffres b.montant-gain, .ar-moi-chiffres b.montant-perte, .ar-moi-chiffres b.montant-nul { font-family: var(--font-mono); }
.ar-moi-chiffres small { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.4; }
.ar-moi-doux { color: var(--muted-foreground); font-weight: 500 !important; }
.ar-moi-vert { color: var(--success); }

.ar-moi-bas { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-moi .sdc-sous { display: grid; gap: 8px; }

/* Le téléphone (07/11/2026 : la disposition se choisit par l'appareil) et une page étroite. */
[data-appareil="telephone"] .ar-moi { padding: 18px 16px; gap: 14px; }
[data-appareil="telephone"] .ar-moi-tete { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
[data-appareil="telephone"] .ar-moi-portrait .trd-avatar { width: 62px; height: 62px; }
[data-appareil="telephone"] .ar-moi-portrait .trd-emoji { font-size: 30px; }
[data-appareil="telephone"] .ar-moi-gestes { grid-column: 1 / -1; }
[data-appareil="telephone"] .ar-moi-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-appareil="telephone"] .ar-moi-axe > span:nth-child(even of span) { display: none; }
[data-appareil="telephone"] .ar-moi-bas .btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 760px) {
  .ar-moi-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .ar-moi-tete { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .ar-moi-portrait .trd-avatar { width: 62px; height: 62px; }
  .ar-moi-gestes { grid-column: 1 / -1; }
  .ar-moi-axe > span:nth-child(even of span) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ar-moi { transition: none; } }