/* =====================================================================
   Les petits chevaux — styles propres au jeu (préfixe pch-)
   La barre, le plein écran et les infobulles sont dans css/games.css.
   Dés en 3D : css/des-3d.css.
   ===================================================================== */

/* Barre commune aux couleurs du jeu */
.pch-jeu {
  --mg-jeu-largeur: 1204px; /* barre de 1180 px + marges de 12 px : ne pas changer */
  --mgb-fond: linear-gradient(120deg, #130c22, #2b1d4a 55%, #4a3472); /* mêmes violets que la zone de jeu */
  --mgb-accent: #ffcf5a;
  --mgb-titre: linear-gradient(100deg, #ffffff 10%, #ffd98a);
  --mgb-police-titre: "Fredoka", system-ui, sans-serif;
  --mg-stat-largeur: 4.6em;
  --mg-fs-fond: #140e24;
  --mg-bulle-fond: #261a42;
  --pch-police: "Fredoka", system-ui, sans-serif;
}

.pch-jeu [hidden] {
  display: none !important;
}

/* Couleurs des écuries : --c (vive), --c2 (foncée), --cl (claire) */
.pch-rouge {
  --c: #e8383d;
  --c2: #8f1018;
  --cl: #ffd9d6;
}
.pch-vert {
  --c: #2fae5f;
  --c2: #0f5c2d;
  --cl: #d4f3dd;
}
.pch-jaune {
  --c: #f7b916;
  --c2: #a86a00;
  --cl: #fff0c2;
}
.pch-bleu {
  --c: #2f74e0;
  --c2: #12387a;
  --cl: #d7e5ff;
}

.pch-stat-tour b {
  min-width: 5.6em;
  text-align: left;
}
.pch-stat-tour b::before {
  content: "";
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-right: 0.35em;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px #fff4;
}
.pch-tour-rouge {
  color: #ff8a80 !important;
}
.pch-tour-vert {
  color: #7be3a0 !important;
}
.pch-tour-jaune {
  color: #ffd760 !important;
}
.pch-tour-bleu {
  color: #8fb8ff !important;
}

/* ---------- Zone de jeu ---------- */
.pch-zone {
  position: relative;
  box-sizing: border-box;
  align-self: center;
  width: min(var(--mg-barre-largeur, 1180px), calc(100vw - 24px));
  padding: 14px;
  border-radius: 16px;
  overflow: hidden;
  font-family: var(--pch-police);
  color: #f4ecff;
  background:
    radial-gradient(circle at 1px 1px, #ffffff0d 1px, #0000 1.5px) 0 0 / 22px
      22px,
    radial-gradient(ellipse at 32% 38%, #4a3472 0%, #261a42 52%, #130c22 100%);
}

.pch-zone :where(p, li, span, b, small, h2, label, button) {
  font-family: var(--pch-police);
}

/* Plein écran : la zone prend toute la place sous la barre */
.pch-jeu.mg-fs .pch-zone {
  align-self: stretch;
  width: auto;
  flex: 1;
  min-height: 0;
}

.pch-scene {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

/* ---------- Plateau ---------- */
.pch-plateau {
  --cote: 600px;
  --case: calc(var(--cote) / 15);
  position: relative;
  flex: none;
  width: var(--cote);
  height: var(--cote);
  border-radius: calc(var(--case) * 0.45);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 40%, #fffaf0 0%, #f6ead0 70%, #ecdcb8 100%);
  box-shadow:
    0 0 0 calc(var(--case) * 0.12) #c99a4a,
    0 0 0 calc(var(--case) * 0.38) #6e3d1b,
    0 0 0 calc(var(--case) * 0.42) #3b1d0a,
    0 calc(var(--case) * 0.35) calc(var(--case) * 1.1) calc(var(--case) * 0.3)
      #000a,
    inset 0 0 calc(var(--case) * 0.8) #b9925244;
  margin: calc(var(--case) * 0.42);
  user-select: none;
  -webkit-user-select: none;
}

.pch-case {
  position: absolute;
  box-sizing: border-box;
  width: calc(var(--case) * 0.9);
  height: calc(var(--case) * 0.9);
  transform: translate(-50%, -50%);
  border-radius: calc(var(--case) * 0.22);
  display: grid;
  place-items: center;
}
.pch-piste-case {
  background: linear-gradient(160deg, #ffffff, #f1e6cf);
  box-shadow:
    inset 0 -2px 0 #0000001a,
    0 1px 2px #6b4a1a55,
    0 0 0 1px #c9b28a;
}
.pch-sortie,
.pch-marche {
  background: linear-gradient(160deg, var(--c), var(--c2));
  box-shadow:
    inset 0 2px 0 #ffffff55,
    inset 0 -2px 0 #0003,
    0 1px 2px #0005;
}
.pch-pied {
  background: linear-gradient(160deg, #fff, var(--cl));
  box-shadow:
    inset 0 0 0 calc(var(--case) * 0.06) var(--c),
    0 1px 2px #6b4a1a55;
}
.pch-fleche {
  width: 62%;
  height: 62%;
  fill: #fff;
  transform: rotate(var(--rot));
  filter: drop-shadow(0 1px 1px #0005);
}
.pch-marche b {
  font-size: calc(var(--case) * 0.46);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px #0006;
}
.pch-fer {
  background: radial-gradient(circle at 40% 30%, #fff6c9, #f2c94c 55%, #c08a1d);
  box-shadow:
    inset 0 -2px 0 #0002,
    0 0 0 1px #b07f17,
    0 0 calc(var(--case) * 0.25) #ffd76699;
}
.pch-fer svg {
  width: 66%;
  height: 66%;
  fill: #8a5a00;
  filter: drop-shadow(0 1px 0 #fff8);
}
.pch-brille {
  animation: pch-brille 1s ease-out;
}
@keyframes pch-brille {
  0% {
    box-shadow: 0 0 0 0 #ffe9a0;
    transform: translate(-50%, -50%) scale(1);
  }
  30% {
    transform: translate(-50%, -50%) scale(1.25);
  }
  100% {
    box-shadow: 0 0 0 calc(var(--case) * 0.9) #ffe9a000;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Écuries : enclos dans les quatre coins */
.pch-ecurie {
  position: absolute;
  box-sizing: border-box;
  width: calc(100% * 6 / 15);
  height: calc(100% * 6 / 15);
  padding: calc(var(--case) * 0.35);
  border-radius: calc(var(--case) * 0.45);
  background:
    repeating-linear-gradient(
      45deg,
      #ffffff14 0 calc(var(--case) * 0.18),
      #0000 0 calc(var(--case) * 0.36)
    ),
    linear-gradient(150deg, var(--c), var(--c2));
  box-shadow:
    inset 0 2px 0 #ffffff55,
    inset 0 -3px 0 #0003;
}
.pch-coin-0 {
  top: calc(100% * 9 / 15);
  left: 0;
}
.pch-coin-1 {
  top: 0;
  left: 0;
}
.pch-coin-2 {
  top: 0;
  left: calc(100% * 9 / 15);
}
.pch-coin-3 {
  top: calc(100% * 9 / 15);
  left: calc(100% * 9 / 15);
}
/* L'enclos : prairie au centre de l'écurie */
.pch-ecurie::before {
  content: "";
  position: absolute;
  inset: calc(var(--case) * 0.55);
  border-radius: calc(var(--case) * 0.6);
  background:
    radial-gradient(ellipse at 50% 35%, #ffffffcc, #ffffff00 70%),
    linear-gradient(160deg, #fffaf0, var(--cl));
  box-shadow:
    inset 0 3px 8px #0003,
    0 0 0 calc(var(--case) * 0.08) #ffffffaa;
}
.pch-ecurie i {
  position: absolute;
  width: calc(var(--case) * 1.25);
  height: calc(var(--case) * 0.5);
  transform: translate(-50%, 10%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    color-mix(in srgb, var(--c) 35%, #0000) 0%,
    #0000 70%
  );
}
.pch-ecurie i:nth-of-type(1) {
  top: calc(100% / 3);
  left: calc(100% / 3);
}
.pch-ecurie i:nth-of-type(2) {
  top: calc(100% / 3);
  left: calc(200% / 3);
}
.pch-ecurie i:nth-of-type(3) {
  top: calc(200% / 3);
  left: calc(100% / 3);
}
.pch-ecurie i:nth-of-type(4) {
  top: calc(200% / 3);
  left: calc(200% / 3);
}
.pch-ecurie-nom {
  position: absolute;
  left: 50%;
  top: calc(var(--case) * 0.06);
  transform: translateX(-50%);
  font-size: calc(var(--case) * 0.34);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px #0006;
  white-space: nowrap;
}
.pch-coin-0 .pch-ecurie-nom,
.pch-coin-3 .pch-ecurie-nom {
  top: auto;
  bottom: calc(var(--case) * 0.04);
}

/* Centre : quatre triangles et un fer à cheval doré */
.pch-centre {
  position: absolute;
  top: calc(100% * 6 / 15);
  left: calc(100% * 6 / 15);
  width: calc(100% * 3 / 15);
  height: calc(100% * 3 / 15);
}
.pch-centre svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 1px 2px #0004);
}
.pch-centre polygon {
  stroke: #fffaf0;
  stroke-width: 0.6;
  stroke-linejoin: round;
}
.pch-tri-rouge {
  fill: #e8383d;
}
.pch-tri-vert {
  fill: #2fae5f;
}
.pch-tri-jaune {
  fill: #f7b916;
}
.pch-tri-bleu {
  fill: #2f74e0;
}
.pch-centre-fer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--case) * 0.95);
  height: calc(var(--case) * 0.95);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c9, #f2c94c 55%, #b07c12);
  box-shadow:
    0 0 0 calc(var(--case) * 0.07) #fffaf0,
    0 2px 6px #0006;
}
.pch-centre-fer svg {
  width: 66%;
  height: 66%;
  fill: #7a4d00;
}

/* Destination du cheval survolé */
.pch-cible {
  position: absolute;
  z-index: 5;
  width: calc(var(--case) * 0.9);
  height: calc(var(--case) * 0.9);
  transform: translate(-50%, -50%);
  border-radius: calc(var(--case) * 0.22);
  box-shadow:
    0 0 0 calc(var(--case) * 0.08) var(--c, #fff),
    0 0 calc(var(--case) * 0.4) var(--c, #fff);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.pch-cible.pch-visible {
  opacity: 1;
  animation: pch-pouls 0.9s ease-in-out infinite;
}
@keyframes pch-pouls {
  50% {
    transform: translate(-50%, -50%) scale(0.86);
  }
}

/* ---------- Chevaux ---------- */
.pch-cheval {
  --e: 1;
  position: absolute;
  z-index: 10;
  width: calc(var(--case) * 0.74 * var(--e));
  height: calc(var(--case) * 0.81 * var(--e));
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  transform: translate(-50%, -60%);
  transition:
    top 0.22s ease-out,
    left 0.22s ease-out,
    width 0.3s,
    height 0.3s;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.pch-cheval:focus {
  outline: none;
}
.pch-cheval svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 92%;
}
.pch-a-l-ecurie {
  --e: 1.7;
}
.pch-au-podium {
  --e: 0.76;
}
.pch-c-ombre {
  fill: #2a160540;
}
.pch-c-socle {
  fill: var(--c2);
}
.pch-c-corps {
  fill: var(--c);
  stroke: var(--c2);
  stroke-width: 3;
  stroke-linejoin: round;
}
.pch-c-crin {
  fill: var(--c2);
  opacity: 0.7;
}
.pch-c-reflet {
  fill: #ffffff70;
}
.pch-c-oeil {
  fill: #fff;
  stroke: #1d1d1d;
  stroke-width: 2.6;
}
.pch-c-naseau {
  fill: #0006;
}
.pch-num {
  position: absolute;
  right: -8%;
  top: -6%;
  min-width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  display: none;
  place-items: center;
  font: 700 calc(var(--case) * 0.3) / 1 var(--pch-police);
  color: var(--c2);
  background: #fff;
  box-shadow: 0 1px 3px #0006;
}

/* Cheval jouable : il trépigne, un halo doré au sol */
.pch-jouable {
  cursor: pointer;
  z-index: 90 !important;
}
.pch-jouable .pch-num {
  display: grid;
}
.pch-jouable svg {
  animation: pch-trepigne 0.75s ease-in-out infinite;
}
.pch-jouable::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: 115%;
  height: 34%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    #ffe37a 0%,
    #ffcf3a99 45%,
    #ffcf3a00 72%
  );
  animation: pch-halo 0.75s ease-in-out infinite;
}
.pch-jouable:hover svg,
.pch-jouable:focus-visible svg {
  animation: none;
  transform: translateY(-14%) scale(1.12);
  filter: drop-shadow(0 4px 4px #0005);
}
@keyframes pch-trepigne {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10%) rotate(-4deg);
  }
}
@keyframes pch-halo {
  50% {
    opacity: 0.55;
    width: 90%;
  }
}

.pch-en-marche {
  z-index: 95 !important;
}
.pch-saut svg {
  animation: pch-saut 0.22s ease-out;
}
@keyframes pch-saut {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  45% {
    transform: translateY(-28%) scale(0.96, 1.06);
  }
  85% {
    transform: translateY(0) scale(1.06, 0.92);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
.pch-renvoye {
  z-index: 96 !important;
  transition:
    top 0.75s cubic-bezier(0.5, -0.4, 0.4, 1.2),
    left 0.75s cubic-bezier(0.5, -0.4, 0.4, 1.2),
    width 0.3s,
    height 0.3s;
}
.pch-renvoye svg {
  animation: pch-vrille 0.75s ease-in-out;
}
@keyframes pch-vrille {
  50% {
    transform: translateY(-60%) rotate(200deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg);
  }
}
.pch-celebre svg {
  animation: pch-celebre 1.1s ease-out;
}
@keyframes pch-celebre {
  25% {
    transform: translateY(-50%) scale(1.5);
    filter: drop-shadow(0 0 10px #ffe37a);
  }
  60% {
    transform: translateY(-10%) scale(1.2) rotate(8deg);
  }
}

/* ---------- Panneau ---------- */
.pch-panneau {
  flex: none;
  width: 330px;
  max-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.pch-joueurs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.pch-joueur {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 8px;
  border-radius: 14px;
  background: linear-gradient(100deg, #ffffff17, #ffffff08);
  box-shadow:
    inset 4px 0 0 var(--c),
    inset 0 0 0 1px #ffffff14;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.pch-joueur.pch-actif {
  transform: translateX(-6px);
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--c) 42%, #0000),
    #ffffff0d
  );
  box-shadow:
    inset 4px 0 0 var(--c),
    inset 0 0 0 1.5px var(--c),
    0 0 18px color-mix(in srgb, var(--c) 45%, #0000);
}
.pch-joueur-pion {
  width: 34px;
  height: 37px;
  flex: none;
}
.pch-joueur-pion svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pch-actif .pch-joueur-pion svg {
  animation: pch-trepigne 0.9s ease-in-out infinite;
  transform-origin: 50% 92%;
}
.pch-joueur-nom {
  flex: 1;
  font-weight: 600;
  font-size: 1.05em;
  line-height: 1.1;
}
.pch-joueur-nom small {
  display: block;
  font-weight: 500;
  font-size: 0.72em;
  color: #cbbde6;
}
.pch-joueur-pions {
  display: flex;
  gap: 5px;
}
.pch-joueur-pions i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 70%, #fff);
  opacity: 0.55;
}
.pch-joueur-pions i.pch-p-piste {
  opacity: 1;
  background: color-mix(in srgb, var(--c) 45%, #0000);
}
.pch-joueur-pions i.pch-p-arrive {
  opacity: 1;
  background: var(--c);
  box-shadow:
    inset 0 0 0 2px #fff,
    0 0 6px var(--c);
}

.pch-lancer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0 2px;
}
.pch-piste {
  --taille-de: 62px;
  width: 230px;
  box-sizing: border-box;
  min-height: 128px;
  margin-bottom: 10px;
}
.pch-btn-lancer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  margin: 0;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  font: 600 1.08em var(--pch-police);
  color: #3a1d00;
  background: linear-gradient(180deg, #ffe08a, #f5b52a);
  box-shadow:
    inset 0 2px 0 #fff8,
    0 4px 0 #a86a00,
    0 8px 18px #0006;
  cursor: pointer;
  transition:
    transform 0.1s,
    box-shadow 0.1s,
    opacity 0.2s,
    filter 0.2s;
}
.pch-btn-lancer:hover:not(:disabled) {
  filter: brightness(1.06);
}
.pch-btn-lancer:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 0 #fff8,
    0 1px 0 #a86a00,
    0 4px 10px #0006;
}
.pch-btn-lancer:disabled {
  opacity: 0.35;
  cursor: default;
  filter: grayscale(0.6);
}
.pch-a-moi .pch-btn-lancer {
  animation: pch-appel 1.6s ease-in-out infinite;
}
@keyframes pch-appel {
  50% {
    box-shadow:
      inset 0 2px 0 #fff8,
      0 4px 0 #a86a00,
      0 0 26px #ffcf5acc;
  }
}
.pch-message {
  margin: 10px 0 0;
  min-height: 2.7em;
  text-align: center;
  font-size: 1.02em;
  line-height: 1.32;
  color: #f4ecff;
}
.pch-message b {
  color: #ffd760;
}
.pch-message small {
  font-size: 0.86em;
  color: #cbbde6;
}

.pch-journal {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0000002e;
  box-shadow: inset 0 0 0 1px #ffffff12;
  font-size: 0.86em;
  color: #d8cdf0;
  overflow: hidden;
  /* hauteur fixe de 5 lignes : le journal qui se remplit ne décale pas le reste du panneau */
  flex: none;
  box-sizing: border-box;
  height: calc(5 * 1.6em + 20px);
}
.pch-journal:empty {
  visibility: hidden;
}
.pch-journal li {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 1.6em;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pch-journal li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}
.pch-journal li:first-child {
  color: #fff;
}
.pch-journal li:nth-child(n + 4) {
  opacity: 0.6;
}

/* ---------- Fenêtres (réglages, fin de partie) : dans la zone, sous la barre ---------- */
.pch-voile {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #0d081899;
  backdrop-filter: blur(3px);
  animation: pch-apparait 0.25s ease-out;
}
@keyframes pch-apparait {
  from {
    opacity: 0;
  }
}
.pch-fenetre {
  width: min(430px, 100%);
  box-sizing: border-box;
  margin: 0;
  padding: 22px 26px 20px;
  border-radius: 20px;
  color: #3a2410;
  background: linear-gradient(170deg, #fffaf0, #f3e3c0);
  box-shadow:
    0 0 0 4px #c99a4a,
    0 0 0 9px #6e3d1b,
    0 22px 50px #000a;
  animation: pch-monte 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes pch-monte {
  from {
    transform: translateY(20px) scale(0.94);
    opacity: 0;
  }
}
.pch-fenetre h2 {
  margin: 0 0 14px;
  text-align: center;
  font: 700 1.6em var(--pch-police);
  color: #7c1a26;
}
.pch-reglage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px dashed #c9a46a;
  font-weight: 600;
}
.pch-reglage small {
  font-weight: 500;
  color: #8a6a44;
}
.pch-choix {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: #e6d2a8;
  box-shadow: inset 0 1px 3px #0002;
}
.pch-choix button {
  min-width: 40px;
  height: 32px;
  margin: 0;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  font: 600 0.95em var(--pch-police);
  color: #6b4a24;
  background: none;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.pch-choix button.pch-choisi {
  color: #fff;
  background: linear-gradient(180deg, #b0472c, #7c1a26);
  box-shadow: 0 2px 4px #7c1a2666;
}
.pch-fenetre-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.pch-fenetre-fin {
  text-align: center;
}
.pch-fin-medaille {
  width: 96px;
  height: 104px;
  margin: -6px auto 4px;
  animation: pch-celebre 1.4s ease-out;
}
.pch-fin-medaille svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 16px #ffd76088);
}
.pch-fenetre-fin h2 {
  margin-bottom: 4px;
}
.pch-fenetre-fin p {
  margin: 0 0 12px;
  color: #6b4a24;
}
.pch-fin-classement {
  list-style: none;
  counter-reset: rang;
  margin: 0 auto;
  padding: 0;
  max-width: 280px;
  display: grid;
  gap: 6px;
}
.pch-fin-classement li {
  counter-increment: rang;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 10px;
  background: #ffffffaa;
  box-shadow: inset 4px 0 0 var(--c);
  font-weight: 600;
}
.pch-fin-classement li::before {
  content: counter(rang);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8em;
  color: #fff;
  background: var(--c);
}
.pch-fin-classement li span {
  flex: 1;
  text-align: left;
}

/* ---------- Écran étroit : panneau sous le plateau ---------- */
.pch-etroit .pch-zone {
  height: auto !important;
}
.pch-etroit .pch-scene {
  flex-direction: column;
  gap: 14px;
}
.pch-etroit .pch-panneau {
  width: 100%;
  max-width: 520px;
}

/* Option « case de départ protégée » : bouclier sur les cases de sortie */
.pch-protege .pch-sortie::after {
  content: "";
  position: absolute;
  right: -14%;
  top: -14%;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: #fffaf0
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235a3a12' d='M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5z'/%3E%3C/svg%3E")
    center / 64% no-repeat;
  box-shadow: 0 1px 3px #0006;
}

/* ---------- Réglages : qui tient chaque écurie ---------- */
.pch-fenetre-reglages {
  width: min(540px, 100%);
}
.pch-sieges {
  display: grid;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #c9a46a;
}
.pch-siege {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 600;
}
.pch-siege-nom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pch-siege-nom::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 -2px 0 var(--c2);
}
.pch-siege .pch-choix button {
  min-width: 0;
  padding: 0 10px;
  font-size: 0.86em;
}
.pch-siege .pch-choix button.pch-choisi {
  background: linear-gradient(180deg, var(--c), var(--c2));
  box-shadow: 0 2px 4px color-mix(in srgb, var(--c2) 40%, #0000);
}
.pch-reglages-erreur {
  min-height: 1.3em;
  margin: 8px 0 0;
  text-align: center;
  font-weight: 600;
  color: #b3261e;
}