.jeu { --accent: #244c88; --accent-clair: #e9effa; }
.jeu-grille { display: grid; grid-template-columns: minmax(270px, .78fr) minmax(0, 1.3fr); gap: 20px; align-items: start; }
.question { border-top: 3px solid var(--accent); }
.jeu-compteurs, .carte-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.jeu-compteurs { margin-bottom: 19px; color: var(--secondaire); font-size: .87rem; }
.jeu-compteurs strong { color: var(--accent); }
.question h2 { font-size: clamp(1.45rem, 3.2vw, 2rem); margin-bottom: 7px; overflow-wrap: anywhere; }
.champs-jeu { display: grid; gap: 11px; margin-top: 16px; }
.indice-jeu { display: grid; gap: 3px; padding: 9px 11px; background: #eef2f8; border-radius: 7px; }
.indice-jeu span { color: var(--secondaire); font-size: .83rem; }
.indice-jeu strong { font-size: 1.08rem; }
.champ input[data-juste='true'] { border-color: var(--accent); background: #e9f3ed; }
.champ input[data-juste='false'] { border-color: var(--alerte); background: #fcf1ee; }
.jeu-selection { margin-top: 13px; color: var(--secondaire); font-size: .9rem; }
.jeu-correction:not(:empty) { display: grid; gap: 7px; margin-top: 14px; padding: 11px; border-radius: 7px; background: #eef2f8; line-height: 1.4; }
.jeu-correction[data-juste='true'] { background: #e9f3ed; }
.jeu-correction[data-juste='false'] { background: #fcf1ee; }
.jeu-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 15px; }
.carte-panneau { padding-bottom: 10px; }
.carte-entete { margin-bottom: 10px; }
.carte-commandes { display: flex; flex-wrap: wrap; gap: 4px; }
.carte-commandes .bouton { padding: 5px 8px; font-size: .85rem; }
.carte-commandes .bouton[aria-pressed='true'] { background: var(--accent-clair); border-color: var(--accent); color: var(--accent); }
.carte-france { display: block; width: 100%; height: clamp(290px, 51vw, 555px); border-radius: 8px; background: #eaf0f8; }
.carte-france path { fill: #fafbfc; stroke: #698098; stroke-width: .75; vector-effect: non-scaling-stroke; }
.carte-france[data-active] path { cursor: pointer; }
.carte-france[data-active] path:hover { fill: #d3e0f3; }
.carte-france path[data-choisi], .carte-france[data-active] path[data-choisi]:hover { fill: #668dc7; stroke: #254c83; }
.carte-france path[data-correct] { fill: #8bc4a7; stroke: #12664d; }
.carte-france path[data-erreur] { fill: #e9a49a; stroke: #a52e27; }
.carte-france circle { fill: #132e54; stroke: white; stroke-width: 1.25; vector-effect: non-scaling-stroke; pointer-events: none; }
.carte-source { margin-top: 7px; font-size: .77rem; }
.carte-liste { margin-top: 7px; color: var(--accent); font-size: .86rem; }
.carte-liste label { margin-top: 5px; max-width: 330px; }
.jeu .bouton-principal:not(:disabled):hover { background: #15396b; }
@media (max-width: 720px) {
  .jeu-grille { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .jeu[data-carte] .question { display: contents; }
  .jeu[data-carte] .question > :is(.jeu-compteurs, h2, .note, .jeu-selection, .jeu-correction, .jeu-actions) { margin: 0; }
  .jeu[data-carte] .question h2 { margin-bottom: -7px; }
  .jeu[data-carte] .carte-panneau { order: 1; }
  .jeu[data-carte] .jeu-selection, .jeu[data-carte] .jeu-correction, .jeu[data-carte] .jeu-actions { order: 2; }
  .jeu[data-carte] .jeu-correction:not(:empty) { margin: 0; }
}