/* Salle de jeux : complète /css/style.css (mêmes polices, mêmes couleurs, mêmes clairs/sombres). */
.bandeau nav a[aria-current="page"] { color: var(--rec); text-decoration: underline; text-decoration-thickness: 2px; }
.hero--jeux { padding-bottom: 0; }
.hero--jeux h1 { font-size: clamp(3.2rem, 11vw, 8rem); }
.jeux { display: grid; gap: clamp(2rem, 4vw, 2.75rem); }
.jeux h2 { margin-bottom: 0; }
.jeux h2 a { text-decoration: none; }
.jeux h2 a:hover { text-decoration: underline; }

.jeu {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 32rem) minmax(13rem, 18rem);
  gap: 1.5rem;
  align-items: start;
  scroll-margin-top: 1.5rem;
}
.jeu .vignette { display: block; }
.jeu h3 a { text-decoration: none; }
.jeu h3 a:hover { text-decoration: underline; }
.jeu-corps p { margin: 0 0 .6rem; }
.podium { border-left: 2px solid color-mix(in srgb, var(--encre) 14%, transparent); padding-left: 1rem; min-width: 0; }
.podium-titre { font-family: var(--display); font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin: 0 0 .4rem; }
.podium ol { list-style: none; counter-reset: r; margin: 0; padding: 0; font-size: 1rem; }
.podium li { counter-increment: r; display: flex; gap: .6rem; padding: .2rem 0; }
.podium li::before { content: counter(r); font-family: var(--display); font-weight: 700; color: var(--gris); width: 1rem; }
.podium li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium li b { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; }
.podium li.moi span, .podium li.moi b { color: var(--rec); }

@media (max-width: 52rem) {
  .jeu { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .podium { grid-column: 2; border-left: 0; padding-left: 0; border-top: 1px solid color-mix(in srgb, var(--encre) 14%, transparent); padding-top: .6rem; }
}
@media (max-width: 34rem) {
  .jeu { grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; }
}

/* Vignettes 9:16 dans l'esprit des cadres de la page d'accueil */
.motif--memoire {
  background:
    repeating-linear-gradient(0deg, transparent 0 22%, rgba(255,255,255,.85) 22% 24%, transparent 24% 30%),
    linear-gradient(var(--teal), #0a3c3a);
}
.motif--quiz {
  background:
    radial-gradient(circle at 30% 30%, var(--ocre) 0 14%, transparent 15%),
    radial-gradient(circle at 70% 55%, var(--rose) 0 14%, transparent 15%),
    radial-gradient(circle at 35% 78%, #fff 0 10%, transparent 11%),
    var(--nuit);
}
.motif--shanghai {
  background:
    linear-gradient(135deg, transparent 0 30%, #f4ebd3 30% 70%, transparent 70%) center / 70% 30% no-repeat,
    radial-gradient(ellipse at 50% 45%, #145244, #0f3d33);
}
.motif--pirates {
  background:
    linear-gradient(to bottom, transparent 0 62%, #5b3c22 62% 70%, transparent 70%),
    linear-gradient(100deg, transparent 0 48%, #efe6cf 48% 64%, transparent 64%) center 35% / 100% 40% no-repeat,
    linear-gradient(#0b1e23, #1c4b52);
}
.motif--dunes {
  background:
    radial-gradient(ellipse at 30% 75%, #c4894c 0 40%, transparent 41%),
    radial-gradient(ellipse at 80% 90%, #a8743f 0 45%, transparent 46%),
    radial-gradient(circle at 70% 40%, #ffb21f 0 8%, transparent 9%),
    linear-gradient(#1e1915, #3d2b22);
}
.motif--bolide {
  background:
    linear-gradient(to top, #c4bdf0 0 45%, transparent 45%) center bottom / 60% 100% no-repeat,
    radial-gradient(circle at 50% 38%, #ff4fa3 0 22%, transparent 23%),
    linear-gradient(#0d0b1f, #3a1752);
}
.motif--empires {
  background:
    conic-gradient(from 45deg at 50% 50%, #5a8b3b 0 25%, #a59b54 0 50%, #2a6890 0 75%, #8e8a54 0) center / 70% 40% no-repeat,
    linear-gradient(#0f1829, #16233d);
}

/* Pseudo */
.profil p { max-width: var(--mesure); }
.pform { display: flex; gap: .6rem; flex-wrap: wrap; }
.pform input, .champ {
  font: inherit; color: var(--encre); background: transparent;
  border: 2px solid color-mix(in srgb, var(--encre) 25%, transparent); border-radius: 3px; padding: .45rem .7rem;
  min-width: 0; flex: 0 1 16rem;
}
.pform button, .bouton {
  font-family: var(--display); font-weight: 650; font-size: 1.05rem; cursor: pointer;
  background: var(--encre); color: var(--papier); border: 2px solid var(--encre); border-radius: 3px; padding: .45rem 1.1rem;
}
.bouton.leger { background: transparent; color: var(--encre); }
.pform button:hover, .bouton:hover { background: var(--rec); border-color: var(--rec); color: #fff; }
.bouton[disabled] { opacity: .45; cursor: not-allowed; }
.msg { min-height: 1.6em; color: var(--teal); }
.msg.err { color: var(--rec); }
.msg { color: #6fd3c2; }

/* ---------- Jeux simples : plateau commun ---------- */
.partie { padding: clamp(2rem, 6vw, 4rem) var(--marge) 0; display: grid; gap: 1.5rem; max-width: calc(46rem + 2 * var(--marge)); }
.partie h1 { font-size: clamp(3rem, 10vw, 6.5rem); }
.plateau {
  background: var(--pellicule); color: #eef0f7; border-radius: 6px;
  padding: clamp(1.25rem, 4vw, 2.25rem); display: grid; gap: 1.2rem; min-height: 20rem; align-content: start;
}
.plateau .outils { color: #a4a9bf; }
.plateau .bouton { background: #eef0f7; color: #1a1c2c; border-color: #eef0f7; }
.plateau .bouton.leger { background: transparent; color: #eef0f7; }
.plateau .bouton:hover { background: var(--rec); border-color: var(--rec); color: #fff; }
.plateau .champ { color: #eef0f7; border-color: rgba(238,240,247,.35); }
.choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.choix button {
  font-family: var(--display); font-weight: 600; font-size: 1rem; cursor: pointer;
  background: transparent; color: #eef0f7; border: 2px solid rgba(238,240,247,.3); border-radius: 3px; padding: .4rem .9rem;
}
.choix button[aria-pressed="true"] { border-color: var(--ocre); color: var(--ocre); }
.statut { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-family: var(--display); font-size: 1rem; color: #a4a9bf; }
.statut b { color: #fff; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.jauge { height: 6px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
.jauge i { display: block; height: 100%; width: 100%; background: var(--ocre); transform-origin: left; }
.grand {
  font-family: var(--display); font-weight: 800; letter-spacing: .04em; line-height: 1;
  font-size: clamp(3rem, 14vw, 7rem); text-align: center; min-height: 1.2em; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.grand.ok { color: #6fd3c2; } .grand.ko { color: #ff6a5a; }
.consigne { text-align: center; margin: 0; color: #c9cce0; }
.reponses { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; }
.reponses button {
  font-family: var(--texte); font-size: 1.2rem; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.06); color: #eef0f7; border: 2px solid rgba(238,240,247,.2); border-radius: 4px; padding: .7rem .9rem;
}
.reponses button kbd { font-family: var(--display); font-size: .8rem; color: #a4a9bf; margin-right: .5rem; }
.reponses button:hover:not([disabled]) { border-color: var(--ocre); }
.reponses button.bonne { border-color: #6fd3c2; background: rgba(14,124,116,.35); }
.reponses button.fausse { border-color: #ff6a5a; background: rgba(216,57,43,.3); }
.classement { width: 100%; border-collapse: collapse; font-size: 1rem; }
.classement th, .classement td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid rgba(238,240,247,.14); }
.classement th { font-family: var(--display); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #a4a9bf; }
.classement td.n { text-align: right; font-family: var(--display); font-variant-numeric: tabular-nums; }
.classement tr.moi td { color: var(--ocre); }
.retour { font-family: var(--display); font-weight: 600; }
.plateau #zone { display: grid; gap: 1rem; justify-items: stretch; }
.plateau #zone > p { margin: 0; }

/* Jeux simples venus de la version « nuit dorée » */
.motif--quizz {
  background:
    radial-gradient(circle at 30% 30%, var(--ocre) 0 14%, transparent 15%),
    radial-gradient(circle at 70% 55%, var(--rose) 0 14%, transparent 15%),
    radial-gradient(circle at 35% 78%, #fff 0 10%, transparent 11%),
    var(--nuit);
}
.motif--calcul {
  background:
    linear-gradient(#ffd23f, #ffd23f) center / 46% 9% no-repeat,
    linear-gradient(#ffd23f, #ffd23f) center / 9% 26% no-repeat,
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 12%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 20%),
    linear-gradient(#123a4a, #0b2230);
}
.motif--paires {
  background:
    url("../../galerie/miniatures/le-trio-de-chats-85e7ac48ab.webp") 18% 50% / 46% auto no-repeat,
    linear-gradient(135deg, #a855f7, #5b21b6) 84% 50% / 46% 62% no-repeat,
    #1b1236;
}
.motif--simon {
  background:
    radial-gradient(circle, #0c0d1c 0 16%, transparent 17% 46%, #0c0d1c 47%),
    conic-gradient(#2fbf71 0 25%, #e8463c 0 50%, #3b82f6 0 75%, #ffd23f 0);
}
.motif--trace {
  background:
    radial-gradient(circle at 58% 40%, transparent 0 20%, #ff4fa3 21% 25%, transparent 26%),
    repeating-linear-gradient(115deg, transparent 0 46%, #6fd3c2 46% 50%, transparent 50% 100%) 0 70% / 100% 30% no-repeat,
    linear-gradient(#1a1240, #0c0d1c);
}

/* Mémoire : la suite entière s'affiche d'un coup ; la taille s'adapte à sa longueur */
.grand.suite-memoire { letter-spacing: .12em; white-space: nowrap; overflow-wrap: normal; font-size: min(7rem, calc(min(42rem, 84vw) / (var(--n, 3) * .78))); min-height: 1.2em; }