/* ==========================================================================
   AimFree — isolation de la page
   --------------------------------------------------------------------------
   CE BLOC EST LE PLUS IMPORTANT DU FICHIER POUR LA FLUIDITE.

   Le site pose derriere chaque page un .site-bg-spin : une image de fond de
   160vmax sur 160vmax — soit plus de 2300 px de cote sur un ecran courant, cinq
   megapixels — qui tourne en boucle infinie, avec will-change:transform, donc
   sur sa PROPRE couche graphique, jamais liberee. Cette couche est recomposee a
   chaque image, y compris en plein ecran, y compris pendant qu'on joue. S'y
   ajoutent une douzaine d'animations CSS infinies (badge BETA, bandeau live,
   bandeaux defilants) qui reveillent le fil principal en permanence.

   Un entraineur de visee ne peut pas viser 240 images par seconde en partageant
   le budget avec un fond d'ecran qui tourne. On coupe donc tout ca sur cette
   page — et, pendant une partie, on retire aussi de l'affichage tout ce qui
   n'est pas le stand.
   ========================================================================== */

/* Sur cette page, le fond tournant n'a aucune raison d'exister : le stand
   l'occulte entierement. On ne le masque pas, on le SUPPRIME du rendu — masquer
   une couche will-change ne la libere pas toujours. */
body.aimfree .site-bg,
body.aimfree .site-bg-spin { display: none !important; }

/* Les animations decoratives de la barre du site : elles tournent en boucle
   pour rien pendant qu'on joue. */
body.aimfree .beta-badge-live span,
body.aimfree .live-band-inner,
body.aimfree .drop-ticker-inner { animation: none !important; }

/* Pendant la partie, le reste de la page sort du rendu. content-visibility
   plutot que display:none : la place reste reservee, donc aucun reflow au
   retour, mais le navigateur cesse de dessiner ces sous-arbres. */
body.aim-focus .top-nav,
body.aim-focus .jeux-hero,
body.aim-focus .aim-modes,
body.aim-focus .aim-mode-desc,
body.aim-focus .aim-diffs,
body.aim-focus .aim-note-diff,
body.aim-focus .aim-bascule-lobby,
body.aim-focus .aim-cartes,
body.aim-focus .aim-d2,
body.aim-focus .aim-bas,
body.aim-focus .weekly-bonus-band,
body.aim-focus .site-footer { content-visibility: hidden; }

/* ==========================================================================
   AimFree — le stand de tir
   ========================================================================== */

/* ---- les records, dans le chapeau ---- */
.aim-records { display: grid; gap: 4px; }
.aim-record { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; }
.aim-record span { color: var(--text-faint, #6b7280); text-transform: capitalize; }
.aim-record b { color: var(--accent, #ff8a00); font-variant-numeric: tabular-nums; }

/* ---- le choix de l'exercice ---- */
.aim-modes { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 10px; }
.aim-mode {
  display: grid; justify-items: center; gap: 3px; padding: 13px 10px;
  border-radius: 12px; cursor: pointer; font: inherit;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31);
  color: var(--text-dim, #a7adb5);
}
.aim-mode:hover { border-color: var(--text-faint, #6b7280); color: var(--text, #eef1f4); }
.aim-mode.is-on { border-color: var(--accent, #ff8a00); color: var(--accent, #ff8a00); background: var(--accent-dim, rgba(255,138,0,.1)); }
.aim-mode-ico { font-size: 22px; line-height: 1; }
.aim-mode b { font-size: 13.5px; font-weight: 800; }
.aim-mode small { font-size: 10.5px; color: var(--text-faint, #6b7280); }
.aim-mode-desc { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim, #a7adb5); }

/* ---- la difficulte ----
   Elle vit SUR LA PAGE, pas dans le menu de pause : la choisir change le
   classement affiche juste en dessous, donc elle doit se voir avec lui. Chaque
   niveau garde sa couleur, du vert au rouge, la meme dans la liste des duels. */
.aim-diffs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: 8px; }
.aim-diff {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; font: inherit;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31);
  color: var(--text-dim, #a7adb5);
}
.aim-diff b { font-size: 12.5px; font-weight: 800; }
.aim-diff-ico { font-size: 14px; line-height: 1; }
.aim-diff:hover { border-color: var(--text-faint, #6b7280); color: var(--text, #eef1f4); }
.aim-diff.is-on { color: var(--text, #eef1f4); }
.aim-diff.is-facile.is-on    { border-color: #3ddc84; background: rgba(61,220,132,.12); }
.aim-diff.is-normal.is-on    { border-color: #4c9dff; background: rgba(76,157,255,.12); }
.aim-diff.is-difficile.is-on { border-color: #ff9f43; background: rgba(255,159,67,.12); }
.aim-diff.is-legende.is-on   { border-color: #ff4d5e; background: rgba(255,77,94,.13); }
.aim-note-diff { margin: 0 0 14px; }

/* L'arme en main, dans le bloc des munitions : E fait la bascule, il faut donc
   voir d'un coup d'oeil ce qu'on tient. */
#aimArme { color: var(--accent, #ff8a00); font-weight: 800; }

/* La regle du Lobby : tete ou corps. Elle vit sous la description du mode,
   pas dans le menu de pause, parce qu'elle change le classement affiche. */
.aim-bascule-lobby { display: flex; gap: 6px; margin: 0 0 14px; }
.aim-bascule-lobby button {
  flex: 1; padding: 8px 10px; border-radius: 10px; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 700;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31);
  color: var(--text-dim, #a7adb5);
}
.aim-bascule-lobby button:hover { border-color: var(--text-faint, #6b7280); color: var(--text, #eef1f4); }
.aim-bascule-lobby button.is-on {
  border-color: var(--accent, #ff8a00); color: var(--accent, #ff8a00);
  background: var(--accent-dim, rgba(255,138,0,.1));
}
.aim-voile-lobby { display: inline-block; margin-top: 4px; color: var(--text-faint, #6b7280); }

/* Le choix de la carte, SUR la page. Il vivait dans le menu de pause, ou
   personne ne l'a trouve : une fonctionnalite qu'on ne voit pas n'existe pas. */
.aim-cartes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.aim-cartes-lab { font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint, #6b7280); }
.aim-carte {
  padding: 8px 14px; border-radius: 10px; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 700;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31);
  color: var(--text-dim, #a7adb5);
}
.aim-carte:hover { border-color: var(--text-faint, #6b7280); color: var(--text, #eef1f4); }
.aim-carte.is-on {
  border-color: var(--accent, #ff8a00); color: var(--accent, #ff8a00);
  background: var(--accent-dim, rgba(255,138,0,.1));
}
.aim-carte-etat { flex: 1 0 100%; font-size: 11.5px; line-height: 1.5; }
.aim-carte-etat.is-charge { color: var(--text-faint, #6b7280); }
.aim-carte-etat.is-ok { color: #3ddc84; }
.aim-carte-etat.is-ko { color: #ff4d5e; }

/* La pastille de difficulte dans la liste des duels : on doit savoir dans quoi
   on s'engage avant de cliquer sur « Relever le defi ». */
.aim-duel-diff {
  padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px;
  border: 1px solid var(--border, #262b31); color: var(--text-dim, #a7adb5);
}
.aim-duel-diff.is-facile    { border-color: #3ddc84; color: #3ddc84; }
.aim-duel-diff.is-normal    { border-color: #4c9dff; color: #4c9dff; }
.aim-duel-diff.is-difficile { border-color: #ff9f43; color: #ff9f43; }
.aim-duel-diff.is-legende   { border-color: #ff4d5e; color: #ff4d5e; }

/* ---- le stand ---- */
.aim-stand {
  position: relative; border-radius: 14px; overflow: hidden;
  background: #0a0c10; border: 1px solid var(--border, #262b31);
}
#aimCanvas { display: block; width: 100%; aspect-ratio: 16 / 9; cursor: crosshair; }

/* Le viseur, entièrement piloté par des variables : le joueur en règle la
   couleur, la longueur des branches, l'épaisseur et l'écart central, comme dans
   n'importe quel entraîneur de visée. Tout est en CSS, donc changer un réglage
   ne coûte rien à l'affichage et le trait reste net à toutes les tailles. */
.aim-viseur, .aim-viseur-apercu {
  --vc: #6cff9a; --vl: 8px; --vw: 2px; --vg: 5px;
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none;
}
.aim-viseur i, .aim-viseur-apercu i,
.aim-viseur b, .aim-viseur-apercu b { position: absolute; background: var(--vc); }
.aim-viseur:not(.sans-contour) i, .aim-viseur:not(.sans-contour) b,
.aim-viseur-apercu:not(.sans-contour) i, .aim-viseur-apercu:not(.sans-contour) b {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .85);
}
.aim-viseur i.h, .aim-viseur-apercu i.h { width: var(--vw); height: var(--vl); left: calc(var(--vw) / -2); }
.aim-viseur i.n, .aim-viseur-apercu i.n { top: calc(-1 * (var(--vg) + var(--vl))); }
.aim-viseur i.s, .aim-viseur-apercu i.s { top: var(--vg); }
.aim-viseur i.v, .aim-viseur-apercu i.v { height: var(--vw); width: var(--vl); top: calc(var(--vw) / -2); }
.aim-viseur i.w, .aim-viseur-apercu i.w { left: calc(-1 * (var(--vg) + var(--vl))); }
.aim-viseur i.e, .aim-viseur-apercu i.e { left: var(--vg); }
.aim-viseur b, .aim-viseur-apercu b {
  width: var(--vw); height: var(--vw); left: calc(var(--vw) / -2); top: calc(var(--vw) / -2);
}
.aim-viseur.sans-point b, .aim-viseur-apercu.sans-point b { display: none; }

/* ---- compteur d'images et plein écran ---- */
.aim-fps {
  position: absolute; right: 14px; top: 12px; padding: 5px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums;
  background: rgba(10,12,16,.62); border: 1px solid rgba(255,255,255,.08); pointer-events: none;
}
.aim-fps[hidden] { display: none; }
.aim-fps.is-bon { color: #6cff9a; }
.aim-fps.is-moyen { color: #ffd166; }
.aim-fps.is-bas { color: #ff5a5a; }
.aim-plein {
  position: absolute; right: 14px; top: 46px; width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; font-size: 15px; line-height: 1;
  background: rgba(10,12,16,.62); border: 1px solid rgba(255,255,255,.08); color: var(--text, #eef1f4);
}
.aim-plein:hover { border-color: var(--accent, #ff8a00); color: var(--accent, #ff8a00); }
body.aim-lock .aim-plein { display: none; }
/* En plein écran, le stand prend tout : plus de rapport 16/9 imposé. */
.aim-stand:fullscreen { border-radius: 0; border: 0; }
.aim-stand:fullscreen #aimCanvas { aspect-ratio: auto; width: 100vw; height: 100vh; }

/* ---- le tableau de bord ---- */
.aim-hud {
  position: absolute; left: 14px; top: 12px; display: flex; gap: 18px;
  padding: 9px 14px; border-radius: 11px;
  background: rgba(10,12,16,.62); border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(4px); pointer-events: none;
}
.aim-hud-bloc { display: grid; gap: 1px; }
.aim-hud-bloc[hidden] { display: none; }
.aim-hud-bloc span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint, #6b7280); }
.aim-hud-bloc b { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }

.aim-munitions {
  position: absolute; right: 16px; bottom: 14px; text-align: right; pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
.aim-munitions b { display: block; font-size: 27px; font-weight: 900; font-variant-numeric: tabular-nums; }
.aim-munitions b.is-vide { color: #ff5a5a; }
.aim-munitions small { font-size: 10px; color: var(--text-faint, #6b7280); }

.aim-decompte {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 92px; font-weight: 900; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.8);
  pointer-events: none;
}
.aim-decompte[hidden] { display: none; }

/* ---- le voile de départ ---- */
.aim-voile {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 12px;
  align-content: center; text-align: center; padding: 20px;
  background: rgba(8,10,14,.78);
}
/* Pendant la partie la souris est capturée : le voile doit disparaître, sinon
   il intercepterait le clic de tir. */
body.aim-lock .aim-voile { display: none; }
.aim-voile p { margin: 0; font-size: 12px; color: var(--text-dim, #a7adb5); max-width: 460px; line-height: 1.6; }
.aim-go { font-size: 15px; padding: 13px 30px; }

/* ---- le verdict ---- */
.aim-resultat {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 5px;
  padding: 22px; text-align: center; background: rgba(8,10,14,.9);
}
.aim-resultat[hidden] { display: none; }
.aim-resultat h3 { margin: 0 0 4px; font-size: 19px; font-weight: 900; }
.aim-resultat.is-record h3 { color: #ffd166; }
.aim-resultat.is-ko h3 { color: #ff6b6b; }
.aim-resultat p { margin: 0 0 6px; font-size: 12.5px; color: var(--text-dim, #a7adb5); }
.aim-res-score { font-size: 42px; font-weight: 900; line-height: 1; color: var(--accent, #ff8a00); font-variant-numeric: tabular-nums; }
.aim-res-score small { display: block; font-size: 11px; font-weight: 700; color: var(--text-faint, #6b7280); }
.aim-res-l { display: flex; justify-content: space-between; gap: 26px; min-width: 240px; font-size: 12.5px; }
.aim-res-l span { color: var(--text-dim, #a7adb5); }
.aim-res-l b { font-variant-numeric: tabular-nums; }
.aim-res-duel { margin-top: 6px; font-size: 13px; font-weight: 800; color: #ffd166; }
.aim-resultat .case-open-btn { margin-top: 12px; }

/* ---- réglages ---- */
.aim-reglages { display: flex; align-items: center; gap: 14px; margin: 12px 0 20px; flex-wrap: wrap; }
.aim-sensi { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; flex: 1 1 220px; }
.aim-sensi input { flex: 1 1 auto; min-width: 120px; }
.aim-sensi b { font-variant-numeric: tabular-nums; color: var(--accent, #ff8a00); min-width: 40px; }
.aim-son {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 15px;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31); color: var(--text, #eef1f4);
}

/* ---- duels et classement ---- */
.aim-bas { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.aim-note { margin: 0 0 10px; font-size: 12px; line-height: 1.55; color: var(--text-faint, #6b7280); }
.aim-mon-duel {
  margin-bottom: 10px; padding: 11px 13px; border-radius: 11px; font-size: 12.5px;
  background: var(--accent-dim, rgba(255,138,0,.1)); border: 1px solid var(--accent, #ff8a00);
}
.aim-mon-duel[hidden] { display: none; }
.aim-mon-duel button { margin-left: 8px; padding: 5px 12px; font-size: 11.5px; }
.aim-duels { display: grid; gap: 8px; margin-top: 10px; }
.aim-duel {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 11px;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31);
}
.aim-duel b { flex: 1 1 auto; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aim-duel span { font-size: 11px; color: var(--text-faint, #6b7280); text-transform: capitalize; }
.aim-duel button { padding: 7px 14px; font-size: 12px; }

.aim-classement { display: grid; gap: 4px; }
.aim-rang {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 56px 76px;
  align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; font-size: 12.5px;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31);
}
.aim-rang.is-moi { border-color: var(--accent, #ff8a00); }
.aim-rang-n { font-weight: 900; color: var(--text-faint, #6b7280); }
.aim-rang-n.is-podium { color: #ffd166; }
.aim-rang-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.aim-rang-prec { font-size: 11px; color: var(--text-faint, #6b7280); text-align: right; }
.aim-rang-score { text-align: right; font-weight: 900; color: var(--accent, #ff8a00); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  /* La souris ne se capture pas sur un écran tactile : le stand reste visible
     et jouable au doigt, mais on prévient que ce n'est pas le bon terrain. */
  #aimCanvas { aspect-ratio: 4 / 3; }
  .aim-hud { gap: 12px; padding: 7px 10px; }
  .aim-hud-bloc b { font-size: 13px; }
  .aim-munitions b { font-size: 20px; }
  .aim-decompte { font-size: 62px; }
}

/* Le menu de pause vit A L'INTERIEUR du stand et non sous la page : c'est ce
   qui le rend visible en plein ecran. Echap relache la souris (aucun navigateur
   ne laisse l'intercepter), la partie se met en pause, et le panneau s'ouvre
   par-dessus le jeu — on n'a jamais quitte le plein ecran.
   Sa mise en forme est plus bas, sous « LE MENU DE PARAMETRES ». */
/* En partie, la souris est capturée : le menu ne doit pas intercepter le tir. */
body.aim-lock .aim-menu { display: none; }

.aim-roue {
  position: absolute; right: 14px; top: 84px; width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; font-size: 14px; line-height: 1; z-index: 5;
  background: rgba(10,12,16,.62); border: 1px solid rgba(255,255,255,.08); color: var(--text, #eef1f4);
}
.aim-roue:hover { border-color: var(--accent, #ff8a00); color: var(--accent, #ff8a00); }
body.aim-lock .aim-roue { display: none; }

.aim-aide-perf { margin: 9px 0 0; font-size: 11px; line-height: 1.55; color: var(--text-faint, #6b7280); }

/* L'aperçu du viseur, sur un carré sombre : on juge le réglage sans lancer une partie. */
.aim-viseur-apercu {
  position: relative; left: auto; top: auto; width: 100%; height: 74px;
  margin-bottom: 10px; border-radius: 9px; background: #10331f;
  border: 1px solid var(--border, #262b31);
}
.aim-viseur-apercu i, .aim-viseur-apercu b { left: 50%; top: 50%; }
.aim-viseur-apercu i.h { margin-left: calc(var(--vw) / -2); }
.aim-viseur-apercu i.n { margin-top: calc(-1 * (var(--vg) + var(--vl))); top: 50%; }
.aim-viseur-apercu i.s { margin-top: var(--vg); top: 50%; }
.aim-viseur-apercu i.v { margin-top: calc(var(--vw) / -2); }
.aim-viseur-apercu i.w { margin-left: calc(-1 * (var(--vg) + var(--vl))); left: 50%; }
.aim-viseur-apercu i.e { margin-left: var(--vg); left: 50%; }
.aim-viseur-apercu b { margin-left: calc(var(--vw) / -2); margin-top: calc(var(--vw) / -2); }

.aim-couleurs { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.aim-couleur {
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.22);
}
.aim-couleur:hover { transform: scale(1.12); }
.aim-couleurs input[type=color] {
  width: 30px; height: 26px; padding: 0; cursor: pointer; background: none;
  border: 1px solid var(--border, #262b31); border-radius: 6px;
}

/* ---- bascule de mode de sensibilité, et champs chiffrés ---- */
.aim-bascule { display: flex; gap: 6px; margin-bottom: 10px; }
.aim-bascule button {
  flex: 1 1 auto; padding: 7px 10px; border-radius: 8px; cursor: pointer; font: inherit;
  font-size: 11.5px; font-weight: 700;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31);
  color: var(--text-dim, #a7adb5);
}
.aim-bascule button:hover { color: var(--text, #eef1f4); }
.aim-bascule button.is-on { border-color: var(--accent, #ff8a00); color: var(--accent, #ff8a00); }
/* `hidden` doit l'emporter sur les regles d'affichage du menu : sans ca, une
   ligne masquee (les champs CS2 quand on est en sensibilite libre) resterait
   visible, parce que `display: flex` gagne contre `display: none` par defaut. */
.aim-ligne[hidden], .aim-aide-perf[hidden], .aim-bascule-lobby[hidden],
[data-panneau][hidden] { display: none !important; }
.aim-nombre {
  flex: 1 1 auto; min-width: 60px; padding: 5px 8px; border-radius: 7px; font: inherit; font-size: 12px;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31); color: var(--text, #eef1f4);
}
/* Le cm/360° : la seule valeur directement comparable avec CS2. */
.aim-cm360 {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 8px 0 4px; padding: 8px 11px; border-radius: 9px; font-size: 12px;
  background: var(--accent-dim, rgba(255,138,0,.1)); border: 1px solid var(--accent, #ff8a00);
}
.aim-cm360 span { color: var(--text-dim, #a7adb5); }
.aim-cm360 b { font-weight: 900; color: var(--accent, #ff8a00); font-variant-numeric: tabular-nums; }

/* ---- le diagnostic de performance ---- */
.aim-diag {
  position: absolute; right: 14px; top: 122px; width: 250px; z-index: 5;
  padding: 10px 12px; border-radius: 10px; font-size: 11.5px;
  background: rgba(10, 12, 16, .82); border: 1px solid rgba(255,255,255,.1);
  pointer-events: none;
}
.aim-diag[hidden] { display: none; }
.aim-diag-l { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }
.aim-diag-l span { color: var(--text-faint, #6b7280); }
.aim-diag-l b { font-variant-numeric: tabular-nums; }
.aim-diag-l.is-alerte b { color: #ff5a5a; }
.aim-diag-note {
  margin: 8px 0 0; padding-top: 7px; font-size: 10.5px; line-height: 1.5;
  color: var(--text-dim, #a7adb5); border-top: 1px solid rgba(255,255,255,.1);
}


/* ==========================================================================
   LE MENU DE PARAMETRES
   ==========================================================================
   Un menu de jeu, pas un formulaire : bandeau d'onglets, colonne de sections,
   lignes « intitule a gauche, controle a droite », et une colonne de droite qui
   donne l'etat reel du rendu. Il vit DANS le stand, donc il reste a l'ecran en
   plein ecran. */
.aim-menu {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(8, 10, 14, .93);
  display: flex; align-items: center; justify-content: center; padding: 2vmin;
  backdrop-filter: blur(3px);
}
.aim-menu[hidden] { display: none !important; }
.aim-menu-boite {
  width: 100%; height: 100%; max-width: 1180px;
  display: flex; flex-direction: column; overflow: hidden;
  background: #12161c; border: 1px solid #262b31; border-radius: 14px;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}

/* ---- bandeau ---- */
.aim-menu-tete {
  display: flex; align-items: center; gap: 18px; padding: 12px 16px;
  border-bottom: 1px solid #222831; background: #151a21;
}
.aim-menu-marque { font-size: 15px; letter-spacing: .8px; color: var(--text, #eef1f4); }
.aim-menu-marque b { font-weight: 800; }
.aim-menu-onglets { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.aim-menu-onglets button {
  padding: 8px 12px; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 11.5px; font-weight: 800; letter-spacing: .6px;
  color: var(--text-faint, #6b7280); border-bottom: 2px solid transparent;
}
.aim-menu-onglets button:hover { color: var(--text, #eef1f4); }
.aim-menu-onglets button.is-on { color: var(--accent, #ff8a00); border-bottom-color: var(--accent, #ff8a00); }
.aim-menu-x {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 14px;
  background: #1b2028; border: 1px solid #2b323b; color: var(--text-dim, #a7adb5);
}
.aim-menu-x:hover { border-color: #ff4d5e; color: #ff4d5e; }

/* ---- corps en trois colonnes ---- */
.aim-menu-corps {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 240px; gap: 0;
}
.aim-menu-cote {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 10px;
  border-right: 1px solid #222831; background: #10141a; overflow-y: auto;
}
.aim-menu-cote button {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 11px 12px; border-radius: 10px; cursor: pointer; font: inherit;
  font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
  background: none; border: 1px solid transparent; color: var(--text-dim, #a7adb5);
}
.aim-menu-cote button:hover { background: #171d25; color: var(--text, #eef1f4); }
.aim-menu-cote button.is-on {
  background: var(--accent-dim, rgba(255,138,0,.12));
  border-color: var(--accent, #ff8a00); color: var(--accent, #ff8a00);
}
.aim-menu-contenu { padding: 16px 20px; overflow-y: auto; }
.aim-menu-apercu {
  padding: 14px; border-left: 1px solid #222831; background: #10141a; overflow-y: auto;
}

/* ---- lignes de reglage ---- */
.aim-groupe {
  margin: 18px 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 1px;
  color: var(--text-faint, #6b7280); text-transform: uppercase;
}
.aim-groupe:first-child { margin-top: 0; }
.aim-groupe em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .8; }
.aim-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 12px; margin-bottom: 5px; border-radius: 10px;
  background: #171c23; border: 1px solid #222831;
  font-size: 12.5px; color: var(--text-dim, #a7adb5);
}
.aim-ligne > span { flex: 1; min-width: 0; }
.aim-ligne em { font-style: normal; color: var(--text-faint, #6b7280); font-size: 11px; }
.aim-ligne .aim-ctrl { display: flex; align-items: center; gap: 10px; }
.aim-ligne input[type=range] { width: 150px; accent-color: var(--accent, #ff8a00); }
.aim-ligne .aim-ctrl > b, .aim-val {
  min-width: 62px; text-align: right; font-weight: 800; color: var(--text, #eef1f4); font-size: 12px;
}
.aim-nombre {
  width: 92px; padding: 6px 8px; border-radius: 8px; font: inherit; font-size: 12px;
  background: #0e1218; border: 1px solid #2b323b; color: var(--text, #eef1f4);
}

/* ---- selecteur a fleches ---- */
.aim-pas {
  display: flex; align-items: center; gap: 2px;
  background: #0e1218; border: 1px solid #2b323b; border-radius: 9px; overflow: hidden;
}
.aim-pas button {
  width: 30px; height: 30px; border: 0; background: none; cursor: pointer;
  color: var(--text-dim, #a7adb5); font-size: 16px; line-height: 1;
}
.aim-pas button:hover { background: #1b2028; color: var(--accent, #ff8a00); }
.aim-pas b {
  min-width: 148px; text-align: center; font-size: 12px; font-weight: 800;
  color: var(--text, #eef1f4);
}

/* ---- interrupteur ---- */
.aim-inter { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; flex: none; }
.aim-inter input { position: absolute; opacity: 0; width: 0; height: 0; }
.aim-inter i {
  position: absolute; inset: 0; border-radius: 999px; background: #2b323b;
  transition: background .15s;
}
.aim-inter i::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #8b939e; transition: transform .15s, background .15s;
}
.aim-inter input:checked + i { background: var(--accent, #ff8a00); }
.aim-inter input:checked + i::after { transform: translateX(20px); background: #fff; }
.aim-inter input:focus-visible + i { outline: 2px solid var(--accent, #ff8a00); outline-offset: 2px; }

/* ---- colonne de droite ---- */
.aim-etat { display: grid; gap: 5px; margin-bottom: 6px; }
.aim-etat > div {
  display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px;
  padding: 6px 9px; border-radius: 8px; background: #171c23; border: 1px solid #222831;
}
.aim-etat span { color: var(--text-faint, #6b7280); }
.aim-etat b { color: var(--text, #eef1f4); font-weight: 800; }
.aim-etat .aim-gpu { font-size: 10px; text-align: right; font-weight: 600; }
.aim-profils { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.aim-profils button {
  padding: 9px 6px; border-radius: 9px; cursor: pointer; font: inherit;
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
  background: #171c23; border: 1px solid #2b323b; color: var(--text-dim, #a7adb5);
}
.aim-profils button:hover { border-color: var(--accent, #ff8a00); color: var(--accent, #ff8a00); }
.aim-raz {
  width: 100%; padding: 10px; border-radius: 9px; cursor: pointer; font: inherit;
  font-size: 11px; font-weight: 800; letter-spacing: .4px;
  background: none; border: 1px solid #2b323b; color: var(--text-dim, #a7adb5);
}
.aim-raz:hover { border-color: #ff4d5e; color: #ff4d5e; }

/* ---- pied ---- */
.aim-menu-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px; border-top: 1px solid #222831; background: #151a21;
}
.aim-menu-pied-d { display: flex; gap: 8px; }

/* ---- rappel des touches ---- */
.aim-touches { display: grid; gap: 5px; }
.aim-touches > div {
  display: flex; align-items: center; gap: 12px; padding: 7px 12px;
  border-radius: 9px; background: #171c23; border: 1px solid #222831; font-size: 12px;
}
.aim-touches kbd {
  min-width: 92px; text-align: center; padding: 4px 8px; border-radius: 6px;
  background: #0e1218; border: 1px solid #333b45; border-bottom-width: 2px;
  font-family: inherit; font-size: 11px; font-weight: 800; color: var(--text, #eef1f4);
}
.aim-touches span { color: var(--text-dim, #a7adb5); }
.aim-touches em { font-style: normal; color: var(--text-faint, #6b7280); }
.aim-records-menu { gap: 6px; }
.aim-records-menu .aim-record {
  padding: 7px 12px; border-radius: 9px; background: #171c23; border: 1px solid #222831;
  font-size: 12px;
}

/* Sur un ecran etroit, les trois colonnes ne tiennent pas : la barre laterale
   et l'etat du rendu passent au-dessus et en dessous du contenu. */
@media (max-width: 900px) {
  .aim-menu-corps { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; }
  .aim-menu-cote { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #222831; }
  .aim-menu-apercu { border-left: 0; border-top: 1px solid #222831; }
  .aim-menu-onglets { display: none; }
  .aim-ligne { flex-wrap: wrap; }
  .aim-ligne input[type=range] { width: 110px; }
  .aim-pas b { min-width: 110px; }
}


/* ==========================================================================
   « ONLY D2 » — le deathmatch
   ========================================================================== */
.aim-d2 {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px;
  margin: 0 0 14px; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,77,94,.09), rgba(255,138,0,.06));
  border: 1px solid rgba(255,138,0,.28);
}
.aim-d2-txt b { color: var(--text, #eef1f4); font-size: 14px; }
.aim-d2-txt p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-dim, #a7adb5); }
.aim-d2-franc { font-size: 11.5px !important; color: var(--text-faint, #6b7280) !important; }
.aim-d2-etat { display: grid; gap: 8px; align-content: start; }
.aim-d2-chiffre {
  display: flex; align-items: baseline; gap: 8px; padding: 8px 12px;
  border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid var(--border, #262b31);
}
.aim-d2-chiffre b { font-size: 20px; font-weight: 900; color: var(--accent, #ff8a00); }
.aim-d2-chiffre span { font-size: 11px; color: var(--text-faint, #6b7280); }
.aim-d2-hist { display: grid; gap: 4px; }
.aim-d2-recente { font-size: 11px; color: var(--text-dim, #a7adb5); }
@media (max-width: 700px) { .aim-d2 { grid-template-columns: 1fr; } }

/* ---- le bandeau en jeu ---- */
/* Le bandeau de partie etait pose exactement sur le bandeau de visee — meme
   coin, memes coordonnees — d'ou les deux blocs imbriques l'un dans l'autre.
   Il passe donc SOUS lui. Sur la page du deathmatch il n'y a pas de bandeau de
   visee, alors il reprend le haut du cadre. */
.aim-dm {
  position: absolute; left: 14px; top: 76px; z-index: 4; width: 232px;
  display: grid; gap: 8px; pointer-events: none;
}
body.onlyd2 .aim-dm { top: 14px; }
.aim-dm[hidden] { display: none !important; }
.aim-dm-tete { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.aim-dm-bloc {
  display: grid; gap: 1px; padding: 7px 10px; border-radius: 9px;
  background: rgba(10,12,16,.68); border: 1px solid rgba(255,255,255,.08);
}
.aim-dm-bloc span { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint, #6b7280); }
.aim-dm-bloc b { font-size: 17px; font-weight: 900; color: var(--text, #eef1f4); }
#aimDmPv.is-mort { font-size: 12px; color: #ff4d5e; }

.aim-dm-scores {
  display: grid; gap: 1px; padding: 6px; border-radius: 9px;
  background: rgba(10,12,16,.68); border: 1px solid rgba(255,255,255,.08);
}
.aim-dm-l {
  display: grid; grid-template-columns: minmax(0,1fr) 28px 28px; gap: 4px; align-items: center;
  padding: 3px 6px; border-radius: 6px; font-size: 11.5px; color: var(--text-dim, #a7adb5);
}
.aim-dm-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aim-dm-l b { text-align: right; font-weight: 900; color: var(--text, #eef1f4); }
.aim-dm-l i { text-align: right; font-style: normal; font-size: 10.5px; color: var(--text-faint, #6b7280); }
.aim-dm-l.is-moi { background: var(--accent-dim, rgba(255,138,0,.14)); color: var(--accent, #ff8a00); }
.aim-dm-l.is-moi b { color: var(--accent, #ff8a00); }
.aim-dm-l.is-absent { opacity: .4; }

.aim-dm-fil { display: grid; gap: 3px; }
.aim-dm-kill, .aim-dm-info {
  padding: 4px 9px; border-radius: 7px; font-size: 11px;
  background: rgba(10,12,16,.68); border: 1px solid rgba(255,255,255,.06);
  color: var(--text-dim, #a7adb5);
}
.aim-dm-kill b { color: var(--text, #eef1f4); font-weight: 800; }
.aim-dm-hs { color: #ffd166; }
.aim-dm-info { color: var(--text-faint, #6b7280); font-style: italic; }
.aim-dm-attente {
  padding: 8px 11px; border-radius: 9px; font-size: 11.5px;
  background: rgba(255,138,0,.14); border: 1px solid rgba(255,138,0,.35);
  color: var(--accent, #ff8a00);
}
.aim-dm-attente small { display: block; margin-top: 2px; color: var(--text-faint, #6b7280); }
.aim-dm-attente[hidden] { display: none !important; }

/* Le tableau final, dans le verdict. */
.aim-dm-tableau { display: grid; gap: 2px; margin: 12px 0; text-align: left; }


/* ==========================================================================
   L'ARMURERIE, LA LUNETTE, LE FIL DES ELIMINATIONS
   ========================================================================== */
.aim-armurerie {
  position: absolute; inset: 0; z-index: 26; display: flex;
  align-items: center; justify-content: center; padding: 3vmin;
  background: rgba(8, 10, 14, .88); backdrop-filter: blur(2px);
}
.aim-armurerie[hidden] { display: none !important; }
.aim-armurerie-boite {
  width: 100%; max-width: 760px; padding: 20px;
  background: #12161c; border: 1px solid #262b31; border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.aim-armurerie-tete { margin-bottom: 14px; }
.aim-armurerie-tete h2 { margin: 0 0 5px; font-size: 17px; font-weight: 900; }
.aim-armurerie-tete span { font-size: 11.5px; color: var(--text-faint, #6b7280); }
.aim-armurerie-tete kbd {
  padding: 2px 6px; border-radius: 5px; font-family: inherit; font-size: 10.5px; font-weight: 800;
  background: #0e1218; border: 1px solid #333b45; color: var(--text, #eef1f4);
}
.aim-armurerie-liste {
  display: grid; gap: 8px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.aim-arme-carte {
  display: grid; justify-items: center; gap: 4px; padding: 13px 10px;
  border-radius: 12px; cursor: pointer; font: inherit; text-align: center;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31);
  color: var(--text-dim, #a7adb5);
}
.aim-arme-carte:hover { border-color: var(--text-faint, #6b7280); color: var(--text, #eef1f4); }
.aim-arme-carte.is-on {
  border-color: var(--accent, #ff8a00); color: var(--accent, #ff8a00);
  background: var(--accent-dim, rgba(255,138,0,.1));
}
.aim-arme-carte.is-ko { opacity: .45; }
.aim-arme-carte b { font-size: 13px; font-weight: 800; }
.aim-arme-carte small { font-size: 10.5px; color: var(--text-faint, #6b7280); }
.aim-arme-etat { font-style: normal; font-size: 10px; color: var(--accent, #ff8a00); }
.aim-arme-ico svg { width: 46px; height: 30px; fill: currentColor; }
/* La vignette rendue depuis le modele 3D : elle remplace la silhouette des
   qu'elle est prete. Hauteur fixe pour que les cartes restent alignees. */
.aim-arme-ico img { display: block; width: 108px; height: 62px; object-fit: contain; }
.aim-dm-arme img { display: block; width: 34px; height: 20px; object-fit: contain; }

/* ---- la lunette ---- */
.aim-lunette { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.aim-lunette[hidden] { display: none !important; }
/* Le cache : un dégradé radial qui laisse un disque net au centre. C'est du
   CSS pur — aucune passe de rendu supplémentaire, donc aucun coût d'images. */
.aim-lunette::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 28vmin,
    rgba(0,0,0,.97) 28.4vmin, rgba(0,0,0,.99) 100%);
}
.aim-lunette::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 56vmin; height: 56vmin; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid rgba(0,0,0,.85);
}
.aim-lunette-h, .aim-lunette-v { position: absolute; background: rgba(10,10,10,.9); }
.aim-lunette-h { left: 0; right: 0; top: 50%; height: 1px; }
.aim-lunette-v { top: 0; bottom: 0; left: 50%; width: 1px; }

/* ---- le fil des eliminations, en haut a droite ---- */
.aim-dm-fil {
  position: absolute; right: 14px; top: 46px; z-index: 4;
  display: grid; gap: 3px; justify-items: end; pointer-events: none; max-width: 46%;
}
.aim-dm-kill {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 6px; font-size: 12px;
  background: rgba(10,12,16,.74); border: 1px solid rgba(255,255,255,.07);
  color: var(--text-dim, #a7adb5);
}
.aim-dm-kill b { color: var(--text, #eef1f4); font-weight: 800; }
.aim-dm-kill.is-moi b:first-child { color: #6cff9a; }
.aim-dm-kill.is-victime b:last-child { color: #ff4d5e; }
.aim-dm-arme svg { display: block; width: 26px; height: 17px; fill: currentColor; opacity: .9; }
.aim-dm-hs { font-size: 11px; }
.aim-dm-info {
  padding: 4px 10px; border-radius: 6px; font-size: 11px;
  background: rgba(10,12,16,.6); border: 1px solid rgba(255,255,255,.05);
  color: var(--text-faint, #6b7280); font-style: italic;
}

/* ---- le message de deblocage ---- */
.aim-degage {
  position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); z-index: 6;
  padding: 9px 16px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
  background: rgba(255,138,0,.16); border: 1px solid rgba(255,138,0,.45);
  color: var(--accent, #ff8a00);
}
.aim-degage[hidden] { display: none !important; }


/* ==========================================================================
   LA PAGE ONLY D2
   ========================================================================== */
.d2-hero h1 { display: flex; align-items: center; gap: 10px; }
.d2-compteurs { display: grid; gap: 6px; }
.d2-compteurs > div {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 12px;
  border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid var(--border, #262b31);
}
.d2-compteurs b { font-size: 19px; font-weight: 900; color: var(--accent, #ff8a00); }
.d2-compteurs span { font-size: 11px; color: var(--text-faint, #6b7280); }

.d2-onglets { display: flex; gap: 8px; margin: 0 0 16px; }
.d2-onglet {
  padding: 9px 18px; border-radius: 10px; font-size: 13px; font-weight: 800;
  text-decoration: none; background: var(--panel-2, #1b1f24);
  border: 1px solid var(--border, #262b31); color: var(--text-dim, #a7adb5);
}
.d2-onglet:hover { border-color: var(--text-faint, #6b7280); color: var(--text, #eef1f4); }
.d2-onglet.is-on {
  border-color: var(--accent, #ff8a00); color: var(--accent, #ff8a00);
  background: var(--accent-dim, rgba(255,138,0,.1));
}

/* ---- la fiche du joueur ---- */
.d2-fiche {
  margin: 14px 0 18px; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,138,0,.09), rgba(255,77,94,.05));
  border: 1px solid rgba(255,138,0,.28);
}
.d2-fiche-nom { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 900; }
.d2-fiche-nom em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--text-faint, #6b7280); }
.d2-rang { color: var(--accent, #ff8a00); }
.d2-fiche-chiffres {
  display: grid; gap: 8px; margin-top: 11px;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.d2-fiche-chiffres > div {
  display: grid; gap: 1px; padding: 8px 10px; border-radius: 9px;
  background: rgba(0,0,0,.28); border: 1px solid var(--border, #262b31);
}
.d2-fiche-chiffres b { font-size: 17px; font-weight: 900; }
.d2-fiche-chiffres span { font-size: 10px; color: var(--text-faint, #6b7280); }

/* ---- le tableau ---- */
.d2-tableau { display: grid; gap: 2px; }
.d2-t-tete, .d2-t-l {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: 34px minmax(0, 1fr) 78px 40px 56px 56px 56px 62px;
  padding: 8px 12px; border-radius: 9px; font-size: 12.5px;
}
.d2-t-tete {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint, #6b7280);
}
.d2-t-l { background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31);
          color: var(--text-dim, #a7adb5); }
.d2-t-l.is-moi { border-color: var(--accent, #ff8a00); background: var(--accent-dim, rgba(255,138,0,.1)); }
.d2-t-l.is-quali { opacity: .62; }
.d2-t-rang { font-weight: 900; color: var(--text-faint, #6b7280); }
.d2-t-rang.is-podium { color: #ffd166; }
.d2-t-nom { font-weight: 800; color: var(--text, #eef1f4);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d2-t-nom em { font-style: normal; margin-left: 7px; font-size: 10px; font-weight: 600;
               color: var(--text-faint, #6b7280); }
.d2-t-ratio { font-weight: 900; color: var(--accent, #ff8a00); }
@media (max-width: 760px) {
  .d2-t-tete, .d2-t-l { grid-template-columns: 30px minmax(0,1fr) 66px 34px; font-size: 12px; }
  .d2-t-tete > span:nth-child(n+5), .d2-t-l > span:nth-child(n+5) { display: none; }
}


/* L'arme en main pendant le rechargement : le compteur passe en attente plutot
   que d'afficher un chiffre qui ne veut plus rien dire. */
.aim-munitions b.is-recharge { color: var(--accent, #ff8a00); font-size: 13px; }


/* ---- le reglage des touches ---- */
.aim-touches-reglables { display: grid; gap: 5px; margin-bottom: 10px; }
.aim-touche-l {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 7px 12px; border-radius: 9px; cursor: pointer; font-size: 12.5px;
  background: #171c23; border: 1px solid #222831; color: var(--text-dim, #a7adb5);
}
.aim-touche-l:hover { border-color: var(--text-faint, #6b7280); }
.aim-touche-b {
  min-width: 118px; padding: 5px 12px; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 800;
  background: #0e1218; border: 1px solid #333b45; border-bottom-width: 2px;
  color: var(--text, #eef1f4);
}
.aim-touche-b.is-ecoute {
  border-color: var(--accent, #ff8a00); color: var(--accent, #ff8a00);
  background: var(--accent-dim, rgba(255,138,0,.12));
}

/* ---- le voile « clique pour reprendre », apres un Alt+Tab ---- */
.aim-reprise {
  position: absolute; inset: 0; z-index: 24; display: flex;
  align-items: center; justify-content: center; flex-direction: column; gap: 10px;
  background: rgba(8,10,14,.72); cursor: pointer;
  font-size: 15px; font-weight: 800; color: var(--text, #eef1f4);
}
.aim-reprise[hidden] { display: none !important; }
.aim-reprise small { font-size: 12px; font-weight: 500; color: var(--text-faint, #6b7280); }


/* Le tableau des scores : reduit en jeu, complet quand on tient sa touche. */
.aim-dm-scores { max-height: 128px; overflow: hidden; transition: max-height .12s; }
.aim-dm-scores.is-ouvert { max-height: 420px; }

/* ==========================================================================
   LE TABLEAU DES SCORES (Tab)
   ==========================================================================
   Il se superpose au jeu sans l'arreter : on continue d'entendre et de voir
   ce qui se passe derriere, seulement assombri. Un tableau qui met la partie
   en pause serait une faille — on regarderait le tableau pour souffler. */
.aim-tableau {
  position: absolute; inset: 0; z-index: 26; display: grid; place-items: center;
  background: rgba(6,8,12,.55); backdrop-filter: blur(2px);
  pointer-events: none;   /* on ne clique pas dedans : la souris reste au jeu */
}
.aim-tableau[hidden] { display: none !important; }
.aim-tableau-boite {
  width: min(760px, 92%); border-radius: 14px; overflow: hidden;
  background: rgba(12,15,20,.94); border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.aim-tableau-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,138,0,.12), transparent);
}
.aim-tableau-tete h2 { margin: 0; font-size: 15px; font-weight: 900; color: var(--text, #eef1f4); }
.aim-tableau-tete span { font-size: 12px; color: var(--text-dim, #a7adb5); }
.aim-tableau-cols, .aim-tableau-l {
  display: grid; grid-template-columns: 34px minmax(0,1fr) 62px 62px 62px 66px;
  gap: 6px; align-items: center; padding: 7px 18px;
}
.aim-tableau-cols {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint, #6b7280); border-bottom: 1px solid rgba(255,255,255,.06);
}
.aim-tableau-cols b, .aim-tableau-l b, .aim-tableau-l i { text-align: right; font-style: normal; }
.aim-tableau-corps { max-height: 52vh; overflow-y: auto; }
.aim-tableau-l {
  font-size: 13px; color: var(--text-dim, #a7adb5);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.aim-tableau-l span.aim-tableau-nom {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text, #eef1f4); font-weight: 700;
}
.aim-tableau-l b { color: var(--text, #eef1f4); font-weight: 900; }
.aim-tableau-l.is-moi { background: rgba(255,138,0,.13); }
.aim-tableau-l.is-moi span.aim-tableau-nom, .aim-tableau-l.is-moi b { color: var(--accent, #ff8a00); }
/* Absent n'est pas parti : sa ligne reste, grisee, parce qu'il garde sa place
   et son score jusqu'a la fin de la partie s'il revient. */
.aim-tableau-l.is-absent { opacity: .45; }
.aim-tableau-etat {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: #ffb163; margin-left: 7px;
}
.aim-tableau-vide { padding: 18px; text-align: center; color: var(--text-faint, #6b7280); font-size: 12.5px; }

/* ==========================================================================
   LES SALONS D'ONLY D2
   ========================================================================== */
.aim-salons { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.aim-salon-bloc {
  display: grid; gap: 9px; align-content: start; padding: 14px;
  border-radius: 12px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.aim-salon-bloc > b { font-size: 13px; color: var(--text, #eef1f4); }
.aim-salon-bloc label { display: grid; gap: 4px; font-size: 11.5px; color: var(--text-dim, #a7adb5); }
.aim-salon-bloc select, .aim-salon-bloc input[type="text"] {
  padding: 8px 10px; border-radius: 8px; font-size: 13px;
  background: rgba(8,10,14,.7); color: var(--text, #eef1f4);
  border: 1px solid rgba(255,255,255,.12);
}
.aim-salon-bloc input[type="text"] { text-transform: uppercase; letter-spacing: .18em; font-weight: 800; }
.aim-salon-case { display: flex !important; flex-direction: row; align-items: center; gap: 7px; }
.aim-salon-case input { width: 15px; height: 15px; }
/* Le code doit se lire de loin et se recopier sans faute : gros, espace, et
   selectionnable d'un clic. */
.aim-salon-code {
  padding: 10px; border-radius: 9px; text-align: center; user-select: all; cursor: copy;
  font-size: 21px; font-weight: 900; letter-spacing: .26em;
  background: rgba(255,138,0,.14); border: 1px solid rgba(255,138,0,.4); color: var(--accent, #ff8a00);
}
.aim-salon-code[hidden], .aim-salon-err[hidden] { display: none !important; }
.aim-salon-err {
  padding: 8px 10px; border-radius: 8px; font-size: 12px;
  background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.4); color: #fca5a5;
}
.aim-salon-bloc small { font-size: 11px; color: var(--text-faint, #6b7280); }

/* Le salon vient d'etre cree : le code, de quoi le copier, puis seulement
   ensuite le bouton qui entre en partie. */
.aim-salon-pret { display: grid; gap: 8px; }
.aim-salon-pret[hidden] { display: none !important; }
.aim-salon-pret small { font-size: 11px; color: var(--text-faint, #6b7280); }

/* Le code dans le bandeau de jeu : lisible d'un coup d'oeil, sans peser. */
#aimDmSalonBloc[hidden] { display: none !important; }
#aimDmSalonCode { letter-spacing: .12em; }

/* Le code dans le menu de pause. C'est le seul endroit ou la souris est libre,
   donc le seul d'ou l'on peut vraiment le copier pendant une partie. */
.aim-menu-salon {
  display: flex; align-items: center; gap: 9px; margin-right: auto; margin-left: 14px;
  padding: 5px 10px; border-radius: 9px;
  background: rgba(255,138,0,.12); border: 1px solid rgba(255,138,0,.34);
}
.aim-menu-salon[hidden] { display: none !important; }
.aim-menu-salon span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint, #6b7280); }
.aim-menu-salon b { font-size: 17px; font-weight: 900; letter-spacing: .2em; color: var(--accent, #ff8a00); user-select: all; }

/* ==========================================================================
   LE VOTE DE CARTE, SOUS LE TABLEAU DE FIN DE PARTIE
   ==========================================================================
   Il doit se lire et se cliquer en quelques secondes : c'est le moment ou
   l'attention retombe, et un vote qu'on ne remarque pas ne sert a rien. */
.aim-vote { display: grid; gap: 8px; margin: 14px 0 4px; }
.aim-vote-titre {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-faint, #6b7280);
}
.aim-vote-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.aim-vote-carte {
  display: grid; gap: 2px; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  color: var(--text-dim, #a7adb5); font: inherit; text-align: center;
  transition: border-color .12s, background .12s;
}
.aim-vote-carte:hover { border-color: rgba(255,255,255,.28); }
.aim-vote-carte b { font-size: 13px; color: var(--text, #eef1f4); }
.aim-vote-carte span { font-size: 11px; }
/* Celle qui mene, et celle que J'AI choisie : deux informations differentes,
   donc deux marques differentes. Les confondre ferait croire qu'on a vote pour
   la carte en tete alors qu'on a vote contre. */
.aim-vote-carte.is-tete { border-color: rgba(61,220,132,.5); background: rgba(61,220,132,.10); }
.aim-vote-carte.is-tete span { color: #3ddc84; }
.aim-vote-carte.is-moi { border-color: var(--accent, #ff8a00); background: var(--accent-dim, rgba(255,138,0,.14)); }
.aim-vote-carte.is-moi b { color: var(--accent, #ff8a00); }
.aim-vote small { font-size: 11px; color: var(--text-faint, #6b7280); }

/* AimFree refresh: scoped to preserve the rest of the website. */
.aimfree .aim-selection-title{font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:#aebdcc;margin:26px 0 12px}
.aimfree .aim-modes,.aimfree .aim-diffs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.aimfree .aim-mode,.aimfree .aim-diff{position:relative;min-height:104px;border:1px solid #303c49;border-radius:16px;background:linear-gradient(145deg,#202b36,#141b23);color:#aebdcc;padding:18px 12px;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;cursor:pointer}
.aimfree .aim-mode:hover,.aimfree .aim-diff:hover,.aimfree .aim-carte:hover{transform:translateY(-3px);border-color:#6a8096}
.aimfree .aim-mode.is-on{background:linear-gradient(135deg,#4a2b19,#241d1a);border-color:#ff984b;box-shadow:inset 0 1px #ffc48b33,0 8px 28px #0003;color:#ffb274}
.aimfree .aim-mode b,.aimfree .aim-diff b{font-size:15px;color:inherit}
.aimfree .aim-mode-ico{display:block;font-size:25px;margin-bottom:8px}
.aimfree .aim-mode small{display:block;margin-top:7px;font-variant-numeric:tabular-nums;opacity:.8}
.aimfree .aim-diff{min-height:82px;border-top:3px solid var(--difficulty);display:flex;align-items:center;justify-content:center;gap:10px}
.aimfree .aim-diff.is-facile{--difficulty:#60d5a3}.aimfree .aim-diff.is-normal{--difficulty:#6baeff}.aimfree .aim-diff.is-difficile{--difficulty:#ffb15e}.aimfree .aim-diff.is-legende{--difficulty:#d39aff}
.aimfree .aim-diff.is-on{border-color:var(--difficulty);color:var(--difficulty);background:#25313e;box-shadow:0 0 0 2px #ffffff0c}
.aimfree .aim-diff.is-on:after{content:'✓';position:absolute;top:6px;right:9px;font-size:13px}
.aimfree .aim-mode-desc{line-height:1.7;color:#b8c4d1;margin:12px 0 20px;font-size:13px}
.aimfree .aim-note-diff{font-size:12px;opacity:.75}
.aimfree .aim-cartes:not([hidden]){display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;padding:18px;background:#111922;border:1px solid #2c3946;border-radius:18px}
.aimfree .aim-cartes-lab,.aimfree .aim-carte-etat{grid-column:1/-1}
.aimfree .aim-carte{white-space:normal;text-align:left;min-height:90px;padding:18px;border-radius:12px;background:linear-gradient(145deg,#354553,#1a232d);transition:transform .18s,border-color .18s;border:1px solid #4d5e6e}
.aimfree .aim-carte[data-carte=desert]{background:linear-gradient(145deg,#776046,#302920)}
.aimfree .aim-carte[data-carte=urbain]{background:linear-gradient(145deg,#4a5262,#232933)}
.aimfree .aim-carte[data-carte=entrepot]{background:linear-gradient(145deg,#305a61,#1b2b35)}
.aimfree .aim-carte small{display:block;font-size:11px;margin-top:9px;color:#d0d9e2}
.aimfree .aim-carte.is-on{border-color:#ffaf68;box-shadow:inset 0 0 0 1px #ffaf68;color:#ffc38f}
.aimfree .aim-stand{border:1px solid #344455;border-radius:20px;overflow:hidden;box-shadow:0 20px 65px #0004}
.aimfree .aim-voile{background:radial-gradient(ellipse at center,#17233377,#070c14e8)}
.aimfree .aim-go{border-radius:12px;padding:17px 38px;box-shadow:0 8px 35px #ff8b3433;transition:transform .18s}
.aimfree .aim-go:hover{transform:translateY(-2px)}
.aimfree .aim-hud-bloc{border-radius:10px;background:#101924cc;border:1px solid #ffffff12;backdrop-filter:blur(8px)}
.aimfree button:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:650px){.aimfree .aim-modes,.aimfree .aim-diffs{grid-template-columns:repeat(2,minmax(0,1fr))}.aimfree .aim-mode{min-height:90px}.aimfree .aim-stand{border-radius:12px}}
@media(prefers-reduced-motion:reduce){.aimfree .aim-mode,.aimfree .aim-diff,.aimfree .aim-carte,.aimfree .aim-go{transition:none;transform:none!important}}


body.aim-focus .aim-selection-title{display:none}

.aimfree .aim-carte img{display:block;width:100%;height:112px;object-fit:cover;border-radius:8px;margin-bottom:12px}

/* Respect the lobby-only visibility set by the mode selector. */
.aimfree .aim-cartes[hidden], .aimfree .aim-carte-etat[hidden] { display: none !important; }