/* =====================================================================
   PAGE BIO
   1. Fenêtres Bio et History (texte d'attente)
   2. Écran « SELECT YOUR PLAYER » : esprit des jeux de combat PS2 du début des
      années 2000 (Tekken 5, SSX) : salle d'entraînement en 3D, panneaux gris
      métal, titres chromés en italique, aura bleue (joueur 1) ou rouge (joueur 2).
      Tout est dessiné en CSS, aucune image.
   3. La salle d'entraînement (mur, tapis, sacs de frappe, lampes)
   4. Les bonhommes 3D provisoires (boîtes CSS fabriquées et animées par js/personnages.js)
   ===================================================================== */

/* ---------- 1. Bio et History ---------- */
.page-bio .fenetre + .fenetre { margin-top: 28px; }
.texte-attente { margin: 0; opacity: 0.55; font-style: italic; }

/* ---------- 2. Écran de sélection : couleurs ---------- */
.selection {
  --s-nuit: #06070c;     /* noir bleuté (fonds, ombres des textes) */
  --s-fond: #161a26;
  --s-texte: #eef0f6;
  --s-1p: #2f8dff;       /* joueur 1 : bleu */
  --s-1p-fonce: #1640b8;
  --s-2p: #ff2e3f;       /* joueur 2 : rouge */
  --s-2p-fonce: #a00f1e;
  --p: var(--s-1p);      /* couleur du joueur choisi (changée plus bas) */
  --p-fonce: var(--s-1p-fonce);
  --aura: var(--p);      /* couleur de l'aura (lue aussi par js/personnages.js) */

  /* Salle d'entraînement */
  --g-mur-haut: #2b303b;
  --g-mur-bas: #171a22;
  --g-tapis: #1d2c52;
  --g-tapis-2: #18244a;
  --g-joint: rgb(0 0 0 / 0.45);
  --g-fenetre: #6f9bff;
  --g-lampe: 255 236 200;          /* lumière chaude des lampes (rouge vert bleu) */
  --g-bande-1: #b8202b;
  --g-bande-2: #1f4fd1;
  --g-sac: #8d1b22;
  --g-sac-2: #17181c;
  --g-sac-3: #1d3f9e;              /* sac bleu (à droite) */
}
.selection[data-p="2"] { --p: var(--s-2p); --p-fonce: var(--s-2p-fonce); }
[data-p="1"] { --pj: var(--s-1p); --pj-fonce: var(--s-1p-fonce); }
[data-p="2"] { --pj: var(--s-2p); --pj-fonce: var(--s-2p-fonce); }

/* Thème sombre du site : salle verdâtre, lampes ambrées (les auras restent bleue et rouge) */
[data-theme="sombre"] .selection {
  --s-nuit: #030502;
  --s-fond: #0d160b;
  --s-texte: #e6f2dc;
  --g-mur-haut: #1f2a1c;
  --g-mur-bas: #0d130b;
  --g-tapis: #17270f;
  --g-tapis-2: #12200c;
  --g-fenetre: #b6ff2e;
  --g-lampe: 255 205 120;
  --g-bande-1: #b6ff2e;
  --g-bande-2: #e0a000;
}

/* ---------- Mise en page de l'écran ---------- */
.selection {
  position: relative;
  overflow: hidden;
  overflow: clip; /* comme hidden, mais une recherche (Ctrl+F) ne peut pas décaler la salle de côté */
  isolation: isolate;
  color: var(--s-texte);
  background: linear-gradient(180deg, var(--s-nuit) 0%, var(--s-fond) 56%, var(--s-nuit) 100%);
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) 1.2fr;
  grid-template-areas:
    "entete  entete"
    "fiche   scene"
    "cartes  cartes"
    "dedi    dedi"
    "bande-b bande-b";
  user-select: none;
  -webkit-user-select: none;
}
/* Vignettage (bords plus sombres), par-dessus la salle */
.selection::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(120% 95% at 55% 45%, transparent 55%, rgb(0 0 0 / 0.6));
}

/* ---------- Bande qui défile (en bas) ---------- */
.sel-bande {
  position: relative;
  z-index: 5;
  overflow: hidden;
  white-space: nowrap;
  padding: 5px 0;
  font-family: var(--police-titre);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #fff;
  text-shadow: 1px 1px 0 rgb(0 0 0 / 0.6);
  background:
    repeating-linear-gradient(-60deg, rgb(255 255 255 / 0.12) 0 6px, transparent 6px 14px),
    linear-gradient(90deg, var(--s-1p-fonce), var(--s-1p) 30%, #262a35 46% 54%, var(--s-2p) 70%, var(--s-2p-fonce));
}
.sel-bande-bas { grid-area: bande-b; background: rgb(0 0 0 / 0.6); border-top: 1px solid rgb(255 255 255 / 0.15); }
.sel-bande span {
  display: inline-block;
  animation: sel-defile 26s linear infinite;
}
/* Le texte est écrit plusieurs fois dans la bande : on le décale de sa moitié, en boucle */
@keyframes sel-defile { to { transform: translateX(-50%); } }
.sel-bande-bas span { animation-direction: reverse; animation-duration: 34s; }

/* ---------- Titre chromé ---------- */
.sel-entete {
  grid-area: entete;
  position: relative;
  z-index: 6;
  padding: 18px clamp(16px, 3vw, 28px) 0;
}
.sel-titre {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(19px, 3.6vw, 34px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transform: skewX(-14deg);
  transform-origin: left bottom;
  /* métal poli : reflet clair en haut, ligne sombre au milieu, reflet en bas */
  background: linear-gradient(180deg, #ffffff 0%, #e4e8f0 30%, #9aa4b8 47%, #22262f 50%, #5d6678 62%, #d3d9e4 85%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.6px rgb(255 255 255 / 0.5);
  filter: drop-shadow(2px 2px 0 var(--s-nuit)) drop-shadow(0 0 14px color-mix(in srgb, var(--p) 45%, transparent));
}

/* ---------- Fiche du joueur choisi (nom, identité, onglets Skills / Hobbies) ---------- */
.sel-fiches {
  grid-area: fiche;
  position: relative;
  z-index: 6;
  display: grid;
  align-content: center;
  padding: 8px 12px 8px clamp(16px, 3vw, 28px);
  /* panneau sombre façon menu de jeu PS2, pour lire le texte par-dessus la salle */
  background: linear-gradient(90deg, rgb(6 7 12 / 0.86), rgb(6 7 12 / 0.6) 75%, transparent);
}
.sel-fiche { grid-area: 1 / 1; visibility: hidden; }
.sel-fiche.actif { visibility: visible; animation: sel-glisse-fiche 0.45s var(--glisse) both; }
@keyframes sel-glisse-fiche { from { transform: translateX(-30px); opacity: 0; } }

.sel-plaque { margin: 0; display: grid; justify-items: start; gap: 2px; }
.sel-plaque span {
  padding: 2px 12px 2px 8px;
  font-family: var(--police-titre);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--s-nuit);          /* texte sombre sur la couleur vive : bien lisible */
  background: var(--pj);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.sel-fiche.actif .sel-plaque span { animation: sel-clignote 0.18s steps(2) 6; }
.sel-plaque b {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1;
  transform: skewX(-12deg);
  transform-origin: left bottom;
  background: linear-gradient(180deg, #fff 0%, #fff 32%, var(--pj) 50%, var(--pj-fonce) 51%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(3px 3px 0 var(--s-nuit)) drop-shadow(0 0 18px color-mix(in srgb, var(--pj) 50%, transparent));
}
/* « Issa Traoré aka FLAV » */
.sel-identite { margin: 10px 0 2px; font-size: 14px; line-height: 1.35; font-style: italic; color: rgb(255 255 255 / 0.7); }
.sel-identite b { font-style: normal; font-weight: 700; color: #fff; }
.sel-identite span { font-style: normal; font-weight: 700; color: var(--pj); letter-spacing: 0.04em; }
.sel-role {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* « Started producing in 2016 » */
.sel-debut { margin: -8px 0 12px; font-size: 12px; color: rgb(255 255 255 / 0.8); }
.sel-debut b { color: var(--pj); font-family: var(--police-titre); font-weight: 400; letter-spacing: 0.06em; }

/* Onglets « Skills » / « Hobbies » : boutons de menu en métal, celui choisi prend la couleur du joueur */
.sel-onglets { display: flex; gap: 8px; margin: 0 0 12px 4px; }
.sel-onglet {
  padding: 5px 14px 6px;
  font-family: var(--police-titre);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.75);
  background: linear-gradient(180deg, #4b505d, #1c1f27);
  border: 1px solid rgb(255 255 255 / 0.22);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 2px 0 rgb(0 0 0 / 0.5);
  transform: skewX(-12deg);
  cursor: var(--curseur-main);
}
.sel-onglet:hover { color: #fff; }
.sel-onglet:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sel-onglet[aria-pressed="true"] {
  color: #fff;
  border-color: color-mix(in srgb, var(--pj) 60%, #fff);
  background: linear-gradient(180deg, var(--pj), var(--pj-fonce) 45%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 0 14px color-mix(in srgb, var(--pj) 60%, transparent);
}
.sel-hobbies { display: none; }
.selection[data-onglet="hobbies"] .sel-stats { display: none; }
.selection[data-onglet="hobbies"] .sel-hobbies { display: grid; }

/* Barres de skills en 10 segments, avec la note au bout (la longueur vient de --v dans bio.html, de 0 à 10) */
.sel-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sel-stats li {
  counter-reset: note var(--v);
  display: grid;
  grid-template-columns: 124px minmax(60px, 130px) 2.4ch;
  align-items: center;
  gap: 10px;
  font-family: var(--police-titre);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sel-stats span { white-space: nowrap; }
.sel-stats li::after { content: counter(note); text-align: right; color: color-mix(in srgb, var(--pj) 45%, #fff); font-size: 11px; }
.sel-stats i {
  display: block;
  height: 10px;
  background:
    linear-gradient(90deg, var(--pj) 0 calc(var(--v) * 10%), rgb(255 255 255 / 0.13) 0),
    linear-gradient(180deg, rgb(255 255 255 / 0.5), transparent);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
  mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
}
.sel-fiche.actif .sel-stats i { animation: sel-remplit 0.6s steps(10) both; }
.sel-fiche.actif .sel-stats li:nth-child(2) i { animation-delay: 0.06s; }
.sel-fiche.actif .sel-stats li:nth-child(3) i { animation-delay: 0.12s; }
.sel-fiche.actif .sel-stats li:nth-child(4) i { animation-delay: 0.18s; }
.sel-fiche.actif .sel-stats li:nth-child(5) i { animation-delay: 0.24s; }
.sel-fiche.actif .sel-stats li:nth-child(6) i { animation-delay: 0.3s; }
.sel-fiche.actif .sel-stats li:nth-child(7) i { animation-delay: 0.36s; }
.sel-fiche.actif .sel-stats li:nth-child(8) i { animation-delay: 0.42s; }
.sel-fiche.actif .sel-stats li:nth-child(9) i { animation-delay: 0.48s; }
@keyframes sel-remplit { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Hobbies : une ligne par hobby, marquée de la couleur du joueur */
.sel-hobbies { list-style: none; margin: 0; padding: 0; gap: 5px; max-width: 290px; }
.sel-hobbies li {
  padding: 4px 10px 4px 12px;
  font-size: 13px;
  line-height: 1.3;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.02) 80%, transparent);
  border-left: 3px solid var(--pj);
  animation: sel-glisse-fiche 0.35s var(--glisse) both;
}
.sel-hobbies li:nth-child(2) { animation-delay: 0.04s; }
.sel-hobbies li:nth-child(3) { animation-delay: 0.08s; }
.sel-hobbies li:nth-child(4) { animation-delay: 0.12s; }
.sel-hobbies li:nth-child(5) { animation-delay: 0.16s; }
.sel-hobbies li:nth-child(6) { animation-delay: 0.2s; }
.sel-hobbies li:nth-child(7) { animation-delay: 0.24s; }
.sel-hobbies li:nth-child(8) { animation-delay: 0.28s; }

/* ---------- La scène : le personnage en grand, dans la salle ---------- */
.sel-scene {
  grid-area: scene;
  position: relative;
  height: 450px;
  touch-action: pan-y;          /* glisser de côté fait tourner ; de haut en bas, la page défile */
  cursor: var(--curseur-main);
  outline: none;
}
.sel-scene:focus-visible::after {
  content: "";
  position: absolute;
  inset: 8px 12px;
  border: 2px dashed var(--p);
  pointer-events: none;
}
.sel-scene.tenu { cursor: grabbing; }

/* Les caméras (perspective) et le monde 3D. La salle et le personnage ont chacun leur caméra,
   réglées pareil : la lueur de l'aura (filtre) ne s'applique ainsi qu'au personnage. */
.sel-camera {
  position: absolute;
  inset: 0;
  perspective: 900px;
  perspective-origin: 50% 32%;
  pointer-events: none;
}
.sel-monde {
  position: absolute;
  left: 50%;
  bottom: 62px;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(-9deg) scale(var(--echelle, 1.22));
}
/* Lueur de l'aura collée à la silhouette (les flammes, elles, sont dessinées dans le canvas .sel-aura) */
.sel-camera-joueur {
  filter:
    drop-shadow(0 0 1.5px color-mix(in srgb, var(--aura) 55%, #fff))
    drop-shadow(0 0 9px var(--aura))
    drop-shadow(0 0 24px color-mix(in srgb, var(--aura) 55%, transparent));
}
/* Personnage 3D réaliste (js/joueur-3d.js) : son canvas, et le bonhomme CSS qu'il remplace, caché */
.sel-3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.selection.avec-3d-jc .sel-camera-joueur .perso-jc,
.selection.avec-3d-flav .sel-camera-joueur .perso-flav { display: none; }
.sel-aura {
  position: absolute;
  top: -120px;
  left: -60px;
  width: calc(100% + 120px);
  height: calc(100% + 120px);
  pointer-events: none;
}

/* Cône de lumière de la lampe au-dessus du combattant */
.sel-faisceau {
  position: absolute;
  left: 50%;
  top: -90px;
  bottom: 40px;
  width: 440px;
  margin-left: -220px;
  background: linear-gradient(180deg, rgb(var(--g-lampe) / 0.3), rgb(var(--g-lampe) / 0.08) 65%, transparent);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  filter: blur(8px);
  animation: sel-lampe 6s ease-in-out infinite alternate;
}
@keyframes sel-lampe { 50% { opacity: 0.85; } 52% { opacity: 0.7; } 54% { opacity: 0.9; } }
.selection.flash .sel-faisceau { animation: sel-eclair 0.8s ease-out; }
@keyframes sel-eclair { 0% { filter: blur(8px) brightness(2.4); } }

/* Cercle lumineux au sol, à la couleur du joueur, avec l'ombre du personnage */
.sel-socle {
  position: absolute;
  left: -105px;
  top: -105px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  transform: translateY(1px) rotateX(90deg);
  background:
    radial-gradient(closest-side, rgb(0 0 0 / 0.7) 0 32%, transparent 52%),
    radial-gradient(closest-side, transparent 72%, var(--p) 74% 77%, transparent 79%),
    radial-gradient(closest-side, color-mix(in srgb, var(--p) 45%, transparent), transparent);
}
/* Anneau en pointillés qui tourne sur le sol */
.sel-socle i {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 3px dashed color-mix(in srgb, var(--p) 80%, #fff);
  opacity: 0.7;
  animation: sel-anneau 9s linear infinite;
}
@keyframes sel-anneau { to { transform: rotate(360deg); } }

/* Indication de la vue + flèches, sous le personnage */
.sel-aide {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-family: var(--police-titre);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000;
}
.sel-aide em { font-style: normal; min-width: 11ch; text-align: center; }
/* Flèches cliquables : un appui fait tourner le personnage d'un huitième de tour */
.sel-aide button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font: inherit;
  color: var(--p);
  background: none;
  border: 0;
  cursor: var(--curseur-main);
  animation: sel-clignote 1s steps(2) infinite;
}
.sel-aide button:hover { animation: none; }

/* ---------- Cases PLAYER 1 / PLAYER 2 ---------- */
.sel-cartes {
  grid-area: cartes;
  position: relative;
  z-index: 6;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 4vw, 40px);
  padding: 6px 16px 18px;
}
.carte-joueur {
  position: relative;
  display: grid;
  gap: 0;
  width: 150px;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  outline-offset: 5px;
}
.carte-joueur:focus-visible { outline: 3px solid #fff; }
/* Cadre biseauté du portrait (métal), coloré quand la case est choisie */
.carte-portrait {
  position: relative;
  display: block;
  height: 132px;
  overflow: hidden;
  perspective: 600px;
  perspective-origin: 50% 20%;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  background:
    radial-gradient(80% 70% at 50% 30%, color-mix(in srgb, var(--pj) 55%, transparent), transparent),
    linear-gradient(160deg, #3d4250, #0c0e13 75%);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.5);
  filter: grayscale(1) brightness(0.55);
  transition: filter 0.25s ease;
}
/* Le portrait = le même bonhomme, en garde, cadré tête et épaules */
.carte-portrait .perso { position: absolute; left: 50%; top: 282px; scale: 0.95; }
/* … ou son image 3D (js/joueur-3d.js), qui remplit la case */
.carte-portrait .carte-3d { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-joueur:hover .carte-portrait,
.carte-joueur:focus-visible .carte-portrait { filter: grayscale(0.4) brightness(0.85); }
.carte-joueur[aria-pressed="true"] .carte-portrait {
  filter: none;
  box-shadow: inset 0 0 0 3px var(--pj), inset 0 0 26px color-mix(in srgb, var(--pj) 70%, transparent);
}
/* Coins lumineux autour de la case choisie (curseur de sélection) */
.carte-joueur[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  inset: -5px -5px 32px;
  pointer-events: none;
  --coin: linear-gradient(var(--pj), var(--pj));
  background:
    var(--coin) top left / 18px 3px no-repeat, var(--coin) top left / 3px 18px no-repeat,
    var(--coin) top right / 18px 3px no-repeat, var(--coin) top right / 3px 18px no-repeat,
    var(--coin) bottom left / 18px 3px no-repeat, var(--coin) bottom left / 3px 18px no-repeat,
    var(--coin) bottom right / 18px 3px no-repeat, var(--coin) bottom right / 3px 18px no-repeat;
  filter: drop-shadow(0 0 6px var(--pj));
  animation: sel-cadre 0.7s ease-in-out infinite alternate;
}
@keyframes sel-cadre { from { transform: scale(1.03); } to { transform: scale(0.98); } }

/* Plaque de nom sous le portrait */
.carte-nom {
  display: block;
  margin: 6px 6px 0;
  padding: 3px 0 4px;
  font-family: var(--police-titre);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-align: center;
  background: linear-gradient(180deg, #4b505d, #15171d);
  border: 1px solid rgb(255 255 255 / 0.3);
  transform: skewX(-12deg);
}
.carte-joueur[aria-pressed="true"] .carte-nom { background: linear-gradient(180deg, var(--pj), var(--pj-fonce) 45%); color: #fff; border-color: transparent; }

/* Étiquette « 1P » / « 2P » qui clignote */
.carte-curseur {
  position: absolute;
  top: -10px;
  padding: 2px 8px;
  font-family: var(--police-titre);
  font-size: 11px;
  font-style: normal;
  color: var(--s-nuit);
  background: var(--pj);
  box-shadow: 0 0 12px var(--pj);
  transform: skewX(-12deg);
  animation: sel-clignote 0.9s steps(2) infinite;
}
.carte-joueur[data-p="1"] .carte-curseur { left: -8px; }
.carte-joueur[data-p="2"] .carte-curseur { right: -8px; }

/* « VS » : métal et feu, comme avant un combat */
.sel-vs {
  font-family: var(--police-titre);
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1;
  letter-spacing: -0.04em;
  transform: skewX(-14deg);
  background: linear-gradient(180deg, #fff 0%, #fff 38%, #ffd08a 47%, #ff3b1f 53%, #8a0612 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgb(255 255 255 / 0.7);
  filter: drop-shadow(2px 3px 0 #000) drop-shadow(0 0 12px rgb(255 70 30 / 0.7));
  animation: sel-vs 1.6s ease-in-out infinite alternate;
}
@keyframes sel-vs { to { filter: drop-shadow(2px 3px 0 #000) drop-shadow(0 0 22px rgb(255 90 30 / 0.95)); } }
.selection.flash .sel-vs { animation: sel-vs-choc 0.5s var(--glisse); }
@keyframes sel-vs-choc { from { scale: 1.6; } }

/* Ligne de dédicace (vide = cachée) */
.sel-dedicace {
  grid-area: dedi;
  position: relative;
  z-index: 6;
  margin: 0 16px 16px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.sel-dedicace:empty { display: none; }

@keyframes sel-clignote { 50% { opacity: 0; } }

/* L'écran n'est pas visible (ou on a quitté la page) : tout se fige */
.selection.en-pause *,
.selection.en-pause *::before,
.selection.en-pause *::after { animation-play-state: paused !important; }

/* ---------- 3. La salle d'entraînement ----------
   Des plans posés dans le même monde 3D que le personnage (1 mètre ≈ 172 px) :
   le mur du fond, le sol en tapis, des sacs de frappe et des lampes suspendus.
   Le personnage tourne, la salle reste fixe. */
.sel-camera-salle .sel-monde > * { position: absolute; transform-style: flat; }

/* Mur du fond : béton (grain fait par un filtre SVG), joints, bande peinte, plinthe */
.gym-mur {
  left: -2000px;
  top: -1600px;
  width: 4000px;
  height: 1600px;
  transform: translateZ(-700px);
  background:
    linear-gradient(0deg, #08090c 0 24px, rgb(255 255 255 / 0.06) 24px 27px, transparent 27px),
    linear-gradient(0deg, transparent 150px, var(--g-bande-1) 150px 170px, var(--g-bande-2) 170px 180px, transparent 180px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.45) 0 3px, rgb(255 255 255 / 0.05) 3px 5px, transparent 5px 344px),
    repeating-linear-gradient(0deg, transparent 0 255px, rgb(0 0 0 / 0.28) 255px 258px),
    radial-gradient(900px 720px at 50% 92%, rgb(var(--g-lampe) / 0.2), transparent 70%),
    linear-gradient(180deg, rgb(0 0 0 / 0.55), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0 0 0 -.18'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23b)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0 0 0 -.22'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23t)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--g-mur-haut), var(--g-mur-bas));
}
/* Poutres d'acier verticales (profil en I, rivets) */
.gym-poutre {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% + var(--x) - 34px);
  width: 68px;
  background:
    radial-gradient(circle, #8a92a3 0 2.5px, transparent 3.5px) 0 0 / 68px 46px repeat-y,
    radial-gradient(circle, #8a92a3 0 2.5px, transparent 3.5px) 100% 0 / 68px 46px repeat-y,
    linear-gradient(90deg, #14161b 0 9px, #5a6272 9px 13px, #2c313c 13px 55px, #5a6272 55px 59px, #14161b 59px);
  box-shadow: 18px 0 30px rgb(0 0 0 / 0.5);
}
/* Fenêtres d'usine en hauteur (lumière de la nuit) */
.gym-fenetre {
  position: absolute;
  left: calc(50% + var(--x) - 100px);
  bottom: 330px;
  width: 200px;
  height: 170px;
  border: 8px solid #121419;
  background:
    linear-gradient(90deg, #121419 0 6px, transparent 6px) 0 0 / 61px 100%,
    linear-gradient(0deg, #121419 0 6px, transparent 6px) 0 0 / 100% 56px,
    linear-gradient(160deg, color-mix(in srgb, var(--g-fenetre) 55%, #fff), var(--g-fenetre) 45%, color-mix(in srgb, var(--g-fenetre) 40%, #000));
  opacity: 0.5;
  box-shadow: 0 0 80px 10px color-mix(in srgb, var(--g-fenetre) 35%, transparent);
}

/* Sol : tapis d'entraînement (dalles d'1 mètre), cercle peint et lumière de la lampe */
.gym-sol {
  left: -2000px;
  top: -560px;
  width: 4000px;
  height: 1120px;
  transform: translateY(2px) translateZ(-140px) rotateX(90deg);
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.65), transparent 35%, transparent 80%, rgb(0 0 0 / 0.35)),
    radial-gradient(circle 560px at 2000px 700px, rgb(var(--g-lampe) / 0.28), transparent),
    radial-gradient(circle at 2000px 700px, transparent 300px, rgb(255 255 255 / 0.22) 302px 310px, transparent 312px),
    repeating-linear-gradient(90deg, var(--g-joint) 0 3px, transparent 3px 172px),
    repeating-linear-gradient(0deg, var(--g-joint) 0 3px, transparent 3px 172px),
    conic-gradient(var(--g-tapis) 25%, var(--g-tapis-2) 0 50%, var(--g-tapis) 0 75%, var(--g-tapis-2) 0) 0 0 / 344px 344px;
}

/* Sacs de frappe : chaîne qui descend du plafond + sac en cuir, qui se balance doucement */
.gym-sac {
  left: -32px;
  top: -1500px;
  width: 64px;
  height: 1410px;        /* le bas du sac s'arrête à 90 px (≈ 50 cm) du sol */
  translate: var(--x) 0 var(--z);
  transform-origin: 50% 0;
  animation: gym-balance var(--t) ease-in-out infinite alternate;
}
.gym-sac::before {       /* chaîne */
  content: "";
  position: absolute;
  left: 30px;
  top: 0;
  width: 5px;
  bottom: 196px;
  background: repeating-linear-gradient(180deg, #9aa0ab 0 7px, #25282e 7px 10px);
}
.gym-sac::after {        /* sac */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  border-radius: 14px 14px 18px 18px / 10px 10px 14px 14px;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.7), transparent 28%, rgb(255 255 255 / 0.22) 38%, transparent 52%, rgb(0 0 0 / 0.75)),
    linear-gradient(180deg, rgb(0 0 0 / 0.5) 0 4%, transparent 4% 14%, #0e0f12 14% 19%, transparent 19% 80%, #0e0f12 80% 85%, transparent 85%),
    var(--g-sac);
  box-shadow: 0 10px 22px rgb(0 0 0 / 0.5);
}
.gym-sac-noir::after { --g-sac: var(--g-sac-2); }
.gym-sac-bleu::after { --g-sac: var(--g-sac-3); }
@keyframes gym-balance {
  from { rotate: z -0.35deg; }
  to   { rotate: z 0.35deg; }
}
/* Lampes d'usine suspendues, avec leur cône de lumière */
.gym-lampe {
  left: -40px;
  top: -560px;
  width: 80px;
  height: 560px;
  translate: var(--x) 0 var(--z);
  background: linear-gradient(180deg, rgb(var(--g-lampe) / 0.35), rgb(var(--g-lampe) / 0.04) 80%, transparent);
  clip-path: polygon(34% 3%, 66% 3%, 100% 100%, 0 100%);
}
.gym-lampe::before {     /* abat-jour */
  content: "";
  position: absolute;
  left: 22px;
  top: -6px;
  width: 36px;
  height: 22px;
  border-radius: 18px 18px 4px 4px;
  background: linear-gradient(90deg, #111, #4b505c 40%, #15171c);
  box-shadow: 0 6px 14px rgb(var(--g-lampe) / 0.9);
}

/* ---------- 4. Les bonhommes 3D provisoires ----------
   Chaque pièce (« .b ») est une boîte de 6 faces (« .f »). Les articulations (« .g »)
   sont tournées par js/personnages.js à chaque image (garde, coups, échauffement). */
.perso, .perso .g, .perso .b {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
}
.perso, .perso .g { width: 0; height: 0; }
.sel-monde .perso:not(.actif) { display: none; }

.perso .f {
  position: absolute;
  backface-visibility: hidden;
  /* couches : ombre (selon l'angle) → reflet doux → motif éventuel → couleur de la pièce */
  background:
    linear-gradient(rgb(0 0 0 / var(--o, 0)) 0 0),
    linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(0 0 0 / 0.14)),
    var(--motif, linear-gradient(transparent 0 0)),
    var(--c);
}
/* Ombre de chaque face (les --o-… sont calculés par js/personnages.js selon l'angle) */
.perso .f-av { --o: var(--o-av); }
.perso .f-ar { --o: var(--o-ar); }
.perso .f-d { --o: var(--o-d); }
.perso .f-g { --o: var(--o-g); }
.perso .f-h { --o: 0.02; }
.perso .f-bas { --o: 0.6; }

/* MOTIFS dessinés sur les pièces */
/* peau de mannequin chromé : reflet de ciel avec une ligne d'horizon */
.perso .chrome > .f {
  --motif: linear-gradient(180deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 44%, rgb(16 20 90 / 0.6) 50%, rgb(255 255 255 / 0.2) 100%);
}
/* visière / lunettes : verre brillant */
.perso .m-verre > .f {
  --motif: linear-gradient(170deg, rgb(255 255 255 / 0.9) 0 18%, transparent 30% 60%, rgb(255 255 255 / 0.35) 75%, transparent);
}
/* sweat à capuche : cordons et bande sur la poitrine, poche ventrale + bord côtelé en bas */
.perso .m-sweat > .f-av {
  --motif:
    linear-gradient(var(--lisere) 0 0) 42% 4% / 2px 42% no-repeat,
    linear-gradient(var(--lisere) 0 0) 58% 4% / 2px 42% no-repeat,
    linear-gradient(transparent 66%, var(--lisere) 66% 78%, transparent 78%);
}
.perso .m-sweat > .f-d, .perso .m-sweat > .f-g, .perso .m-sweat > .f-ar {
  --motif: linear-gradient(transparent 66%, var(--lisere) 66% 78%, transparent 78%);
}
.perso .m-poche > .f-av {
  --motif:
    linear-gradient(rgb(0 0 0 / 0.3) 0 0) 50% 52% / 62% 46% no-repeat,
    linear-gradient(transparent 84%, rgb(0 0 0 / 0.35) 84%);
}
.perso .m-poche > .f:not(.f-av):not(.f-h):not(.f-bas) { --motif: linear-gradient(transparent 84%, rgb(0 0 0 / 0.35) 84%); }
/* veste ouverte : t-shirt clair au milieu, fermeture éclair, bande orangée */
.perso .m-veste > .f-av {
  --motif:
    linear-gradient(90deg, transparent 33%, var(--lisere) 33% 36%, var(--tshirt) 36% 64%, var(--lisere) 64% 67%, transparent 67%),
    linear-gradient(transparent 70%, rgb(0 0 0 / 0.25) 70% 74%, transparent 74%);
}
.perso .m-veste > .f-d, .perso .m-veste > .f-g, .perso .m-veste > .f-ar {
  --motif: linear-gradient(transparent 18%, var(--lisere) 18% 24%, transparent 24%);
}
.perso .m-manche > .f { --motif: linear-gradient(transparent 22%, var(--lisere) 22% 30%, transparent 30%); }
.perso .m-poignet > .f { --motif: linear-gradient(transparent 82%, var(--lisere) 82%); }
.perso .m-bande > .f-d, .perso .m-bande > .f-g { --motif: linear-gradient(90deg, transparent 40%, var(--lisere) 40% 60%, transparent 60%); }
.perso .m-cargo > .f-d, .perso .m-cargo > .f-g {
  --motif:
    linear-gradient(rgb(0 0 0 / 0.3) 0 0) 50% 62% / 70% 30% no-repeat,
    linear-gradient(var(--lisere) 0 0) 50% 47% / 70% 3px no-repeat;
}
.perso .m-semelle > .f:not(.f-h):not(.f-bas) { --motif: linear-gradient(transparent 58%, var(--semelle) 58%); }
.perso .m-semelle > .f-av { --motif: linear-gradient(transparent 58%, var(--semelle) 58%), linear-gradient(90deg, transparent 30%, var(--semelle) 30% 70%, transparent 70%) 0 30% / 100% 2px no-repeat; }
.perso .m-bonnet > .f:not(.f-h):not(.f-bas) { --motif: repeating-linear-gradient(90deg, transparent 0 3px, rgb(0 0 0 / 0.18) 3px 4px); }
.perso .m-casquette > .f-av { --motif: linear-gradient(var(--tshirt) 0 0) 50% 45% / 30% 40% no-repeat; }
.perso .m-ecouteur > .f-d, .perso .m-ecouteur > .f-g { --motif: radial-gradient(closest-side, var(--lisere) 0 45%, transparent 50%); }

/* Pieds tournés un peu vers l'extérieur (--sens vaut 1 ou -1 selon le côté) */
.perso .m-semelle { rotate: y calc(var(--sens) * -9deg); }

/* Choix d'un personnage : son nom clignote trois fois (pendant l'éclair) */
.selection.flash .carte-joueur[aria-pressed="true"] .carte-nom { animation: sel-clignote 0.16s steps(2) 6; }

/* ---------- Téléphone ---------- */
@media (max-width: 700px) {
  .selection {
    grid-template-columns: minmax(0, 1fr); /* la rangée des cases ne doit pas élargir l'écran */
    grid-template-areas: "entete" "scene" "cartes" "fiche" "dedi" "bande-b";
  }
  .sel-entete { padding-top: 14px; }
  .sel-scene { height: 330px; }
  .sel-monde { --echelle: 0.82; bottom: 62px; }
  .sel-aide { bottom: 4px; }
  .sel-fiches { padding: 4px 16px 20px; background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.65) 20%); }
  .sel-stats li { grid-template-columns: 128px 1fr 2.4ch; }
  .carte-joueur { width: 118px; }
  .carte-portrait { height: 112px; }
  .carte-portrait .perso { top: 226px; scale: 0.76; }
  .carte-nom { font-size: 13px; }
}

/* ---------- Animations coupées par le visiteur ---------- */
@media (prefers-reduced-motion: reduce) {
  .selection *, .selection *::before, .selection *::after { animation: none !important; }
}