/* 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); }
.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; }
.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; }
.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; }

/* ── Les gradins : une pastille par place ── */
.ar-gradins { display: grid; gap: 10px; }
.ar-gradins-tete { font-size: var(--text-sm); color: var(--muted-foreground); }
.ar-gradins-tete b { color: var(--foreground); font-size: var(--text-base, 1rem); }
.ar-sieges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 10px;
  margin: 0; padding: 0; list-style: none; max-width: 460px; }
.ar-siege { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.ar-siege small { font-size: calc(11px * var(--echelle-texte)); color: var(--muted-foreground); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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); }
.ar-siege--pris small { color: var(--foreground); }
.ar-pastille--vide { border: 1px dashed rgba(180,168,255,.35); color: var(--accent);
  background: rgba(180,168,255,.04); }
.ar-siege--moi .ar-pastille { box-shadow: 0 0 0 2px var(--accent), 0 0 18px var(--accent-glow-strong); }
.ar-siege--moi small { color: var(--accent); font-weight: 500; }

.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 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); }
.ar-charte summary { cursor: pointer; color: var(--accent); font-size: var(--text-sm); }
.ar-charte > div { margin-top: 8px; max-height: 260px; overflow: auto; font-size: var(--text-sm);
  color: var(--muted-foreground); line-height: 1.6; }

/* L'interrupteur de l'accord public */
.ar-interrupteur { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: start;
  cursor: pointer; padding: 12px 14px; border-radius: var(--radius-lg, 14px); border: 1px solid var(--border); }
.ar-interrupteur input { position: absolute; opacity: 0; pointer-events: none; }
.ar-interrupteur b { display: block; font-weight: 500; }
.ar-interrupteur small { display: block; color: var(--muted-foreground); font-size: var(--text-xs, .75rem); margin-top: 2px; line-height: 1.5; }
.ar-interrupteur-piste { position: relative; width: 38px; height: 22px; border-radius: 99px; margin-top: 2px;
  background: var(--muted); border: 1px solid var(--border); transition: background .15s; }
.ar-interrupteur-piste::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--muted-foreground); transition: transform .15s, background .15s; }
.ar-interrupteur:has(input:checked) .ar-interrupteur-piste { background: var(--primary); border-color: var(--primary); }
.ar-interrupteur:has(input:checked) .ar-interrupteur-piste::after { transform: translateX(16px); background: var(--on-primary); }
.ar-interrupteur:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ar-retrait { justify-self: start; margin-top: 14px; }
.ar-changer { border-top: 1px solid var(--border); padding-top: 14px; }
.ar-changer > summary { cursor: pointer; color: var(--accent); font-size: var(--text-sm);
  display: inline-flex; gap: 8px; align-items: center; list-style: none; }
.ar-changer > summary::-webkit-details-marker { display: none; }
.ar-changer[open] > summary { margin-bottom: 16px; }

/* ── 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-accord { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  font-size: var(--text-sm); color: var(--muted-foreground); }
.ar-accord span { display: inline-flex; gap: 6px; align-items: center; }
.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; }

/* ── La première fois : quatre écrans courts (30/10/2026) ── */
.ar-guide { gap: 18px; }
.ar-guide-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ar-guide-points { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ar-guide-points li a { display: block; width: 28px; height: 6px; border-radius: var(--radius-pill);
  background: rgba(180,168,255,.18); transition: background .2s; }
.ar-guide-points li.fait a { background: rgba(180,168,255,.55); }
.ar-guide-points li.ici a { background: var(--accent); box-shadow: 0 0 12px var(--accent-glow-strong); }
.ar-guide-passer { color: var(--muted-foreground); font-size: var(--text-sm); text-decoration: none; }
.ar-guide-passer:hover { color: var(--foreground); }
.ar-guide .ar-titre { font-size: clamp(1.7rem, 5vw, 2.6rem); }
.ar-guide-rassure { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: var(--text-sm); color: var(--foreground); }
.ar-guide-rassure li { display: inline-flex; gap: 8px; align-items: center; }
.ar-guide-rassure svg { color: var(--success, #4ADE80); }
.ar-guide-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: 6px; border-top: 1px solid rgba(180,168,255,.14); }
.ar-guide .ar-risque { font-size: var(--text-xs, .75rem); }

/* ── 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-base, 1rem); }
.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-sieges { gap: 10px 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-guide-nav .btn { flex: 1; justify-content: center; }
  .ar-mon-trader { grid-template-columns: auto minmax(0,1fr); }
  .ar-mon-trader .btn { 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, .ar-interrupteur-piste, .ar-interrupteur-piste::after { 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); }